Damn, but CSS is frustrating.
Over the weekend, I was designing a simple site, to be maintained by the members of our local Green Party without anyone having to worry too much about an over-fussy design. The idea was simple enough: a banner across the top, a main column of blog-like content, and a navigation column over on the right. For design purposes, the two columns were fixed-width, reflecting a design element in the banner.
The main column would have a white background and dark green text; the nav column would be light gray-green with the same dark green text. Oh, and here’s the rub: the nav column would be the same height as the main column.
Well, bud, near as I can tell, there’s no straightforward way to accomplish that straightforward design in CSS. The nav column ends up being too short, not extending to the bottom of the main column.
You’d think that you could wrap the two columns in another div, and make the nav column’s height 100%, but you can’t do that because the columns have to float, and that divorces them from their container’s height.
Yes, there are some more less outlandish workarounds. Something about a bottom margin of 5000 pixels, and negative padding likewise, or vice versa, or something like that. I don’t really want to know.
It’s crazy that you can’t do such a simple layout in a straightforward way with CSS. Don’t tell the Web 2.0 police, but I ended up laying it out with a table. Five minutes and it was done.
I actually like CSS well enough in principle. But the simplest tasks can become a royal pain. Who thinks this stuff up?