Boblet Learned things and Japan diary, by Oli Studholme

A Two-Column Layout

By Oli
At 12:24 PM · Thursday, 28 August · 2003
To CSS · Coding · Weblogging

Why does CSS have to be so hard? All I want to do is make a simple 2-column (2 div; menu and content) layout on a coloured background div, with the menu appearing after the content in the source HTML.

I started off playing with {float: left|right} and {position: absolute}. However anything involving these on a basic containing/background div won’t work. This is because once an element is positioned absolutely or floated, it is taken out of the normal flow of elements. This means it doesn’t take up space, and won’t make a containing div expand to contain it. I played around with {clear: both;} for a bit before giving up. Next I tried making the background a positioned element:

content div set to {position: absolute}

the content div doesn’t expand the background div, so the background div ends at the end of the menu, not the bottom of the longer content div

background set to {position: absolute}, menu set to {position: absolute} plus {top: 0; left: 0;}

almost right, but the background is bigger than expected

background set to {position: relative}, menu set to {position: absolute} plus {top: 0; left: 0;}, and content set to {width: auto;}

everything works as expected, but the bottom margin on content is invisible (the space is there, but the background div hasn’t expanded and the body background is visible

as above, but with a white border set on the background div (same colour as the background)

Everything works as expected! Amazing!

Does anyone else think that CSS should really be a lot easier to use than this? There’s no easy/obvious mechanism for such a basic layout. I still haven’t tested cross-platform yet - I wonder what PC IE will make of this? Still, at least my weblog now looks acceptably ugly ;-)