Q:

Can I create a two-column layout that fluidly adapts to narrow windows?

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
Applying float: left to both divs would result in the wrong one moving to the bottom when the window was too small.

Wrong - div#right is not on top of div#left
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?

A:

Add an outer container to the 2 columns which is floated left, but without a specific width.
Check the fiddle.

A:

This gets you pretty close (disclaimer: I only tested it in Chrome and Firefox), using CSS only:
<html>
<head>
<style type="text/css">
div.main1{ width: 40%; 
    min-width:200px;
     height: 400px;
    border: solid 1px black;
    display:inline-block;
}
div.main2{ width: 40%; 
    min-width:200px;
     height: 400px;
    border: solid 1px black;
    float:left;
}

</style>
</head>
<body>
<div class="main1">right div</div>
<div class="main2">left div</div>
</body>
</html>

The trick is the inline-block display style... Someone else might be able to build on this and do better, but I think it's close.
Aerik

