HTML and CSS are wonderful tools, and examples of how technology can be both powerful and yet easy to learn. To this day, if you go to a well-structured website and look at their code, you can teach yourself the basics of web design without investing a single penny. That's exactly what open source technology is all about, and it's exciting and appropriate that the window into open source (the Internet itself) is also an open platform.
One thing about HTML and CSS, though, is that they're very tolerant languages. You can do quirky things (and by "quirky", I mean wrong) and your code will often still get parsed so that it looks correct. But even worse, the two languages have become so diverse that you can also do something correctly that is still, technically, wrong in a certain context. And that's exactly what happens at least 51% of the times I ever see the <float> tag.
When people are designing a site, they often have the need to move certain elements to the left or right on the page. It's a common web site pattern: a sidebar on the right or a navigation panel on the left. Frequently, people search the Internet for a quick tutorial, and they learn about **float**, which usually solves their problem...at first. So they use it.
There's a time and a place for <float>, but it does get sorely over-used, and often by people who don't understand what it's doing. They use it for one of its effects, and then once they start doing more serious web coding, all of its other inherent attributes cause problems for them. The thing about <float> that nobody talks about is that it, by definition, "floats" an object up and away from the CSS flow of the document. This means that the floated object is no longer affected by much of the document's CSS, making CSS appear a lot more confusing than it really is.
The float attribute, by design, removes an element from the natural flow of your CSS. This means that mostly, all the logic you have learned about CSS and all the techniques and tricks you have developed to manipulate the positioning of your elements are rendered utterly useless. Nothing works any more. You try to use the width of a div so you can center something, but the floated element isn't "in" that div any more, so it can't constrain itself to the div width. Or you try to move other elements around the float but the float moves around in funny ways, because it's not in the flow of the CSS. That's what float does, by design: it removes its element out of CSS and makes it a free-floating radical.
My point is, many people use float when what they really want to use is the inline-block display element.
In case you were not aware, CSS sees some code elements as "block" items, and these block items always get a new line. In other words, if you had a bunch of <p> tags in a document, you would expect CSS to place each paragraph at the beginning of a new line, yes? Well, that's what it would do, because <p> tags are block elements.. Same goes for div, h1, lists and list items, tables, and probably a few others. Point is, when you use a block element, they inherently get placed on their own new line.
This is why it feels so difficult to achieve two columns on a website layout: you want to use a div, but you can't get two divs to coexist on the same line. So you float one, right? Wrong, and here's why.
Take a look at this simple webpage. It consists of two divs, each a different colour.
<head>
<title>Inline Exercise</title>
<style>
#body {background-color: #000; color: cyan;}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="red">
Hi some text.
</div>
<div id="blue">
Second div.
</div>
</body>
Sure enough, each div gets its own line, and is 100% wide, whether we intended it or not:
To get them to site side by side on the same line, you must convert these block elements to inline-block elements. They're still boxes like we generally think of divs being, but they are boxes able to sit side by side. Well actually that's not entirely true yet; this step appears to not work, but you'll see why.
<head><title>Inline Exercise</title>
<style>
#body {background-color: #000; color: cyan;}
#red {
background-color: red;
display: inline-block;
}
#blue {
background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div id="red">
Hi some text.
</div>
<div id="blue">
Second div.
</div>
</body>
Which renders this:
Why has nothing changed? Well, since they are boxes that I want to sit side by side, the boxes must not take up a full 100% of available space, or else they won't fit on the page (because the page itself is only 100%, so how could two things, each measuring 100%, possibly fit side by side?). I'll make them 45% wide, instead:
<head><title>Inline Exercise</title>
<style>
#body {background-color: #000; color: cyan;}
#red {
background-color: red;
width: 45%;
display: inline-block;
}
#blue {
background-color: blue;
width: 45%;
display: inline-block;
}
</style>
</head>
<body>
<div id="red">
Hi some text.
</div>
<div id="blue">
Second div.
</div>
</body>
</html>
And now the divs fit nicely side by side:
Obviously I could manipulate margins and padding and other things to position the divs exactly where I want them to go. But most importantly, these divs obey, because they are still bound by the laws of CSS, rather than left floating about with no point of reference as to what everything else around them are doing.
Bottom line: before you use float, consider display: inline-block; instead.