CSS is a messy mess

28 Nov 2012

, ,

CSS is supposed to make my life easier (and it has) but it’s still a broken counter-intuitive very messy mess. It does not solve all problems, and for the past few days (on and off) I have been going round the bend trying to build a comparatively simple HTML / CSS layout.

The layout has:

  1. Standard left-hand menu (varying length, depending on where we are on the site)
  2. Content block 1 (also varying length, but stretches to fill page)
  3. Content block 2 (floats at bottom)

If we have a tall menu, then content block 2 floats to the bottom and content block 1 expands to fill the page height.

Short menu, tall content
Tall menu, short content

If we have a short menu, then the menu floats over the top of the content blocks (which are the full width of the page)

Tall menu, short content
Short menu, tall content

And no, I cannot use “position:absolute; bottom:0;” because that only works if the menu is tall and the content is short. If your content is tall and the menu is short, then fail! I even took the pragmatic approach and tried a table layout, which didn’t work either.

In the end I cheated and used javascript to set the height of the content blocks and now I feel like a bad person.