Fabulous Floats
HTML is a rather rigid language that typically displays the contents of a document from top to bottom without any frills. Then CSS comes along and tells HTML to “lighten up” and changes the rules. When CSS tells something to float, what it’s really saying is “don’t be a sheep and go with the flow, do your own thing!”
What is a Float?
Before you can really understand what a float is, it is important to know what block and inline elements are. Only one block element, such as a paragraph or a heading, can appear on a line in an HTML page. Every time you create a new paragraph or heading, it appears on its own line. Inline elements, such as links and images, may appear next to one another on the same line. Here are some examples:
<p> Two paragraphs can't appear next to each other, even if there's room. </p> <p> <a href="#">Two inline elements can</a> <a href="#">appear next to each other.</a> </p>
Two paragraphs can’t appear next to each other, even if there’s room.
An HTML page follows this flow, placing each block element on it’s own line, from the top of the document to the bottom of the document.
Floating Block Elements
A common design seen on the web is text formatted into multiple columns. As we saw above, multiple paragraphs cannot occupy the same line, which is a problem. A solution is to use floats which “remove” an element from the normal flow and forces other elements to wrap around it.
When doing this, it is important to remember that block elements (and inline elements) naturally expand to completely surround their contents. This means that in addition to floating an element, you must also define its width, else it will expand to the width of its parent container (defeating the purpose of using a float). You don’t have to define the width of images, as the width is implied (but doing so won’t hurt anything).
<p style="float:left;width:45%;">Text Here</p> <p style="float:right;width:45%;">More Text Here</p>
The text in this column is floated to the left. There is quite a lot of it because you can’t have columns if the text doesn’t wrap to the second line.
This column is floated to the right. It could be floated to the left and achieve the same result, but then I would need to give this column a left margin so that the text wouldn’t be touching, and that clutters up the example.
Floating Inline Elements
In addition to removing block elements from the normal flow, floats can also remove inline elements from the normal flow. One problem that web designers often run into is that while images and text can occupy the same line, the height of the line is determined by the height of the image, which can look quite ugly.
This is a lot of text.
Notice how the image and text both appear on the same line, but not with the intended result.
One method to make this look better is to remove the image from the flow of the page using a float. This will cause the other elements (text in this case) to wrap themselves around the image.
This is a lot of text.
This looks much better.
Clearing Floats.
As we saw when we floated the image, elements will naturally wrap themselves around a floated element. What happens when you want to return to the normal flow and have block elements start occupying their own lines again?
<img style="float:left;" src="image" /> <p>The paragraph we want beside the image.</p> <p>The paragraph we don't</p>
This text is part of the next topic. It is also appearing next to the image. Oh noes!
The clear property tells an element that it needs to wait until line is clear before displaying. In this case, we could use clear:left;
<img style="float:left;" src="image" /> <p>The paragraph we want beside the image.</p> <p style="clear:left;">The paragraph we don't</p>
Much better! This block element now displays on its own line again!
The Float and Clear Values
While I have used most of these in the examples above, here is a complete list of the possible values for both float and clear:
float: [left][right]; clear: [left][right][both];
Floating will move the element to the designated side of its parent container. Clearing will force an element to wait until the designated side of the parent container is clear before displaying. In the case of both, it will force the element to wait until both sides of the parent container are clear.
