Is this layout possible?

I have an idea for a dynamic layout that I simply haven't been able to implement, yet it seems feasible, so I'm hoping somebody can point out something I'm missing.

Basically, I want two columns, the left being a fixed width and the right expanding to fill the window. But when the window gets below a certain width, I want the right column to go below the left, as it would if both were fixed-width and floated.

Here's an illustration of that idea. My goal is a design identical to this with the difference that when the width is between 200 and 400 px it shifts the right column below the left instead of adding a horizontal scrollbar.

<!doctype html>
<html lang='en'>
 <head>
 <meta charset='utf-8'>
 <title>column test</title>
 <style type='text/css'>
  * {margin:0; padding:0; border:0; outline:0;}
  body {background:#88f;}
  #left {position:absolute; width:200px; height:200px; 
background:#f88;}
  #right {margin-left:200px; min-width:200px; height:300px; 
background:#8f8;}
 </style>
 </head>
 <body>
 <div id='left'></div>
 <div id='right'></div>
 </body>
</html>

[edited by: alt131 at 12:04 pm (utc) on Feb 11, 2012]
[edit reason] Side Scroll [/edit]

Is this layout possible?

Skier88

Skier88

penders

Skier88

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week