What do I want?

  • Two side-by-side columns: a fixed-width sidebar and a fluid content.
  • When the window is too narrow, the columns should wrap to be one above the other.
  • A max-width of around 42 em. Trying to make the window wider than that will just cause all content to stay the same width and remain centered in the page.

Doesn't seem like much, does it? Near as I can tell, this is completely impossible.

I resorted to tables when I found I couldn't clear the page header in the content div. It would clear the content below the header, yes, and below the sidebar. Time was running short so I shoved everything into tables, it worked first try, and I went to bed.

CSS Desires

What could be added to CSS to make it less horrible?

  • Support for actual, honest-to-goodness columns. The number of gross hacks you need to implement to get columns to just barely work is just scary. Frankly, abusing 'float' to position columns is even uglier than using tables! And why is it so hard just to get columns to line up a the bottom?
  • Variables or macros. Why are CSS files such copy-n-paste messes? How many times to I need to type "font-family:Arial,Helvetica,sans-serif"? The amount of duplication in a typical CSS file is just stunning. And, as we all know, more duplication means more bugs.
  • A better element hierarchy. Why do I need ol, ul, dl { margin-left: 4%; }? Why don't all list elements inherit from a master element? list { margin-left: 4%; }? Saying "just add a list class to every list element" is just pushing this problem to the HTML coder and misses the whole point of inheriting/cascading.
  • The ability to clear a specific div. That way I can clear the header without clearing all the way below the sidebar too. (todo: create a graphic)
  • Whenever you change the layout of a page, you typically need to change the order of the DIVs in the HTML. That's just counterproductive.
  • Allow expressions? width: 100%-150px; (not sure about this one)
  • The ability to attach edges blocks to each other. For instance, #content { top: #header.bottom } The browser would do everything it could while laying out a page to ensure that the the top of the content is always set to the bottom of the header, regardless of where they are horizontally.


There is a huge amount of crap written about two-column layouts. Most of it is useless. For instance, this one http://www.glish.com/css/9.asp looks pretty close to what I want, right? The side-by-side columns wrap to top-to-bottom when the window gets too narrow.

Just don't let the left column become shorter than the right! Then the right will wrap all the way to the left edge of the window. It looks awful. Why no warning?