Putting blocks under floated items with clear
Views Today: 1, Total Views: 2308, Submitted by: Nuvo on 24-07-2006
When developing a site with no tables, it's often desirable to use the float CSS atribute on DIV tags to allow for multi-column templates.
The problem is though, that it's not unusual for your design to get a little iffy if you have, say, a left floated column and a right floated column with a DIV or similar below both of them.
It often ends up with the block that's supposed to be at the bottom in the middle of the two floated DIV's.
Thankfully, CSS has the clear attribute.
Basically, this tells the browser that an item should appear below floated elements.
By applying clear: left; to the style for the footer or whatever block level element is to be shown below the floated elements, you're telling the browser that the footer should appear below the left floated element rather than beside it or whatever fault is appearing.
The same applies if you want it to show under the right floated element, but what about if you want it shown below both, or more?
It'd be easy to think that you could use clear: left; clear: right;, but due to how CSS works, it'd only clear the right hand float.
clear: all; won't work either, but if you use clear: both; it should display correctly.
Post A Comment
If you want to comment on this tutorial you must first register or login.
Syndicate