How To Keep CSS Floated Blocks Independent Of One Another
I often want to list items with an image that is floated to the left or right of a block of text, followed by another image floated to the left or right of its block of text, followed by another, and another. The problem is that unless there is enough text to equal or exceed the length of the image, the next block will begin under the text (rather than under the image), resulting in something that looks like this:
What we want is something that looks like this instead:
In order to achieve this, a simple CSS class should be added that can then be applied to your <br> tag. (I’ve called this class .clear in the code below). This class makes use of the CSS Clear property, and is very easy to use.
Let’s take a look at the code:
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
.floatleft {
float: left;
margin: 0 5px 5px 0;
}
.clear {
clear: both;
}
</style>
<div style="width: 400px;">
<p><img src="testpic.png" alt="" title="testpic" class="floatleft" height="314" width="155" /> This is a test to figure out how to force new blocks to begin after the bottom of an image, and not after the bottom of the text. Will play around with various scenarios. Placing each paragraph in its own div doesn't help.</p>
<br class="clear" />
<p><img src="testpic.png" alt="" title="testpic" class="floatleft" height="314" width="155" /> This is a test to figure out how to force new blocks to begin after the bottom of an image, and not after the bottom of the text. Will play around with various scenarios.</p>
<br class="clear" />
<p><img src="testpic.png" alt="" title="testpic" class="floatleft" height="314" width="155" /> This is a test to figure out how to force new blocks to begin after the bottom of an image, and not after the bottom of the text. Will play around with various scenarios.</p>
</div>
</head>
</html>
Notice the .clear class? Notice how we’ve then used it with each of the BR tags? That’s all you need to do. What it does is tell the browser to not allow any element to be floated either to the left or the right side of the element (essentially “clearing” the sides of an element of any other floating elements).
And just to make this look really “pretty”, I’ve added in a DIV tag with a width of 400, so you can see how it would look in a typical blog post.
So the next time you wonder why your floated images/text aren’t lining up vertically the way you expected, just remember to clear your floats! 
You can get more information about the CSS Clear Property here.
***
If you are the first to "discover" any of my posts in StumbleUpon, one of the following categories would probably be the most appropriate to place it into. You don't have to choose one of these, of course, but based on what I usually write about, there's a good chance any of my posts will fall into one of these categories.
Computers * Computer Graphics * Computer Hardware * Computer Security * Databases * Internet * Internet Tools * Linux/Unix * Web development * Weblogs(Blogs) * Windows
2 Comments »
RSS feed for comments on this post. TrackBack URL
Leave a comment
I’ve been using the exact same CSS minus the clear property for my online shop’s online catalog, and got the exact same problem. Thanks a lot for this handy tip!
Hey, thanks, WebChicklet!
Been wanting to do this for ages in my photo stories. Will try out soon in WP.