CSS 101: Opposing Floats
Posted on September 07, 2007. 15 comments.
One of the CSS techniques most prone to failing in Internet Explorer 6 is floating elements up against each other.
For instance, you might have a main-content div, and a sidebar div. You then float both of these to the left, and give one of them some margin on the left or right hand side.
Bad idea! This often induces one of IE6’s many CSS layout bugs, so here’s a better way:
Float the two divs to different sides. That is, give the first column a float:left, and the second column a float:right.
Apply a width to each column, so that the whitespace in between the columns is as wide as the margin you originally applied.
Now, the columns aren’t even touching, ensuring that IE6 won’t push one column down below the other.
Just like that you’ve accomplished the same exact layout, without the need to float divs up against each other, making for a much more robust layout.
See also:
15 comments
Justin says:
How would you handle a 3-column situation in that case? Are we stuck using absolute positioning to make IE happy…?
Lim Chee Aun says:
I guess this tip is written only for CSS literates? Anyway, a pretty good tip.
Olav says:
@Justin: I suppose this would work for three columns as well, just make sure one of the columns is floated to the other side, with an unfilled gutter in between two of the columns.
@Lim: Yeah, perhaps this should be called “CSS 201”? ;)
Montoya says:
Justin: It’s a little complex, but you would put the first two columns in a single container, so you have 2 inside 1, and then that 1 plus the third column makes 2 columns.
Point made, you never have to use absolute positioning to do columns.
Michael Daines says:
Is this the “double-margin” bug? If so, that one bit me recently. This Position is Everything article has a simple fix: set “display: inline” on the floated elements. It’s not even invalid – the spec says that you just ignore that rule for floated elements.
Michael Daines says:
Oops, my link was stripped. Here’s the article: http://www.positioniseverything.net/explorer/doubled-margin.html
elv says:
@Michael: The most annoying bug when floats are touching each other is the “3 pixels jog”. You can also find an explanation on positioniseverything.net. Very difficult to fix in a complex layout.
If you have to float divs to the left, just make sure there is a little “gap” so if you encounter one of the multiple IE bugs it won’t ruin the layout. ie: if you have a 300px column and a 600px content in a 900px wide layout, try to give the content a width of, say, 590px (if the design allows you to do so). So if the 3px jog happens, in IE6 your now 593px wide content won’t be pushed down.
California for Barack Obama says:
honestly, we should all just switch to firefox. Forget IE’s 3px jog, and Safari’s untrue colors… it’s all about the freeware nowadays anyways. Besides, it’s easy to code/design for 1 :}
Schreibtisch Hengst says:
excellent information that helped me really out. you are my daysaver! i have searched the hole day for a solution about that problem but don´t find anything that fits for my needs until i found your article. thank you very much keep on the good work!
Joe says:
fantastic! that is what if searched for, thank you very much i had many problems with that s**t.
视频监控 says:
you encounter one of the multiple IE bugs it won’t ruin the layout. ie: if you have a 300px column and a 600px content in a 900px
Rapidshare Premium Account says:
Great tip. If only my .html guy knew stuff like that :) Damn you Adam :)
Rapidshare Premium Account says:
Great tip. If only my .html guy knew stuff like that :) Damn you Adam :)
free ipod games says:
what’s up?
jos says:
Floats are very unreliable, especially combined with the poor browser support, i still use tables the old way.