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:
- Standard left-hand menu (varying length, depending on where we are on the site)
- Content block 1 (also varying length, but stretches to fill page)
- 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.
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)
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.