csslayout

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
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
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.
Opposite floats
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 one on top
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?

Solution

  • 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