Can I create a two-column layout that fluidly adapts to narrow windows?
- by Brant Bobby
I'm trying to design a page that has two columns of content, div#left and div#right. (I know these aren't proper semantic identifiers, but it makes explaining easier) The widths of both columns are fixed.
Desired result - Wide viewport
When the viewport is too narrow to display both side-by-side, I want #right to be stacked on top of #left, like this:
Desired result - narrow viewport
My first thought was simply to apply float: left to #left and float: right to #right, but that makes #right attach itself to the right side of the window (which is the proper behavior for float, after all), leaving an empty space. This also leaves a big gap between the columns when the browser window is really wide.
Wrong - div#right is not flush with the left side of the viewport
Wrong - div#right is not on top of div#left
Applying float: left to both divs would result in the wrong one moving to the bottom when the window was too small. I could probably do this with media queries, but IE doesn't support those until version 9. The source order is unimportant, but I need something that works in IE7 minimum. Is this possible to do without resorting to Javascript?
