Common CSS Layout Challenges

I’m switching gears at work from JavaScript widgets to CSS layout, and let me just say that web browsers, they are humbling things. But I’ve been making an effort to make better use of outside resources during my development process, and it is really helping. Here are some of the challenges I’ve banged my head against in the past but solved more elegantly today with the help of our friend Google:

Layout combining fixed and flexible elements

Specifically, a flexible main content column with a fixed width sidebar, the main content coming first in the code. If it weren’t for the source code order problem the sidebar could just be floated right. If we were using the same units for both columns we could float them left against each other, or use opposing floats. The solution is to use negative margins, which behave differently on floating elements. Here’s a good tutorial: Creating Liquid Layouts with Negative Margins.

Parent element inherits the top margin of its first-child

So I’ve got this #content div with no margins. The first element inside it is an H1 with a 1em top margin. The div actually takes on the margin of the header, creating an unsightly gap. As I suspected this is some bastardized form of margin collapsing. The solution in code looks like this: #content { padding-top: 1px; margin-top: -1px; }, for an explanation we turn to Eric Meyer’s article on Uncollapsing Margins.

Clearing floats in IE7

EasyClearing, the most popular clearing method without structural markup, needs a minor update for IE7: EasyClearing, the Aslett/PIE way is NOT broken in IE7! There’s another method that’s brilliantly simple, applying overflow: auto; to the containing element, but in my experiments it had a nasty tendency to introduce scrollbars.