CSS floating and clearing

Recently I ran into a problem and found myself a bit perplexed. I was working on a flexible layout when I ran into an issue with clearing floats. Let me describe the scenario:

It’s a two-column layout with a right-floated column followed by a left column with a flexible width. It looks somewhat like this:


	<div id="right-col">
		Content...
	</div>
	
	<div id="left-col">
		Content...
	</div>

with this CSS code:


	div#right-col{
		float: right;
		width: 150px;		
	}
	
	div#left-col{
		margin: 0 170px 0 10px;
	}

This means that the left column will have a width that’s expanding within its current given area, but that it always has a right margin not to interfere with the right column. So far, so good. But then I started to add floated elements in the left column and then clearing them, I also cleared the floating of the right column.

I guess this is correct behavior since there was no floated container in between, but still tricky, because I had to use floated elements there. After some discussions with Faruk, he gave me the suggestion to use an inner floated container in the left column, thus making sure to achieve just a “local” clearing. So, the new HTML became this:


	<div id="right-col">
		Content...
	</div>
	
	<div id="left-col">
		<div id="left-inner-col">
			Content...
		</div>
	</div>

with this CSS rule added:


	div#left-inner-col{
		float: left;
		width: 100%;
	}

Works like a charm!

Moral of the story: if you clear floating, make sure you know in what context you do it.

Posted in CSS

6 Comments

  • Tommy Olsson says:

    This is a common pitfall, and the solution – as you’ve discovered – is to wrap the whole thing in a floated element.

  • It's a common problem and I've had a draft trying to explain the whole clearing deal sitting in my system for months now, but it's such a situation dependant and complex thing.

    What surprised me the most is that even the most respectable bloggers who posted examples layouts using floats to create a multiple column layout, have failed to get the following message across: float your content area, as that's the most likely place you'll be needing to clear any elements. Clearing affects all elements that are floated before (in the source) in the same block context.

  • Robert, sometimes it's also possible avoid the usage of an extra wrapper and the clear property by using just floats. An example of clearing without clear could be found in my article How to style a restaurant menu with CSS.

  • Robert Nyman says:

    Tommy,

    Yep.

    Jeroen,

    I'd love to see such an article!

    Alessandro,

    Absolutely.

    But if you just want to float something that isn't 100% wide, I've come to the conclusion that a clearing element is the most consistent and stable solution.

  • Boda says:

    If it is so tricky, what is finally the advantage off a CSS layout over a table layout?

  • Robert Nyman says:

    Boda,

    Well, there are many, so I can't really delve too deep here. But it's about having HTML/XHTML code with semantic value, making accessible and avoiding to have it littered with class names and such as well.

    It's also about total control, something you will never get with a table that has a built in behavior of adapting to its content in a way you can never fully control.

    However, when it comes to column layouts, using float and CSS doesn't always seem like the ultimate way of doing it, but it's the best we have as of today.

Leave a Reply

Your email address will not be published. Required fields are marked *