Turns out some of the float annoyances I recently experienced are easily fixed. All it took was a quick read through Anthony Short’s How to get Cross Browser Compatibility Every Time. As a rule of thumb remember to always overflow:auto your containers:
It seems that reminding the outer DIV that it’s overflow is set to ‘auto’, forces it to think “oh yeah.. I’m wrapping that thing, aren’t I?”.
Sheesh.
In more complex layouts, you’ll still have to solve the ”float drop” problem. Have a look at Faux Absolute Positioning. Interesting use of left: 100% and margin-left: -100%.
We’re not done yet. You obviously want the important content to come first in the HTML, followed by sidebars and everything else. But also for the content to appear right of the sidebar, or in-between two sidebars. Main content up front in your HTML, besides being a supposedly SEO-friendly technique also reads much better on crappy cell phone browsers. Or for that matter any browser when you’re off WiFi and into spotty cell coverage territory.
To the rescue, Matthew James Taylor’s Perfect 3 Column Liquid Layout.
Calendar says its 2008, and we still don’t have an easy way to say ”this section goes on the left column, that section is the right column. ktnxbye”
That’s all for today’s edition of CSS Sucked my Soul. Tune in next time when we explain what it takes to center an element.
Jos Hirth