Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Is this layout possible?



2:48 am on Oct 15, 2011 (gmt 0)

5+ Year Member

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'>
<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;
#right {margin-left:200px; min-width:200px; height:300px;
<div id='left'></div>
<div id='right'></div>

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


4:22 am on Oct 15, 2011 (gmt 0)

5+ Year Member

I found an interesting CSS3 solution in w3.org's layout: change
, then add:

@media (max-width: 400px) {
#right {float:left; margin-left:0;}

But I'm still hoping for something more compatible.


7:19 am on Oct 15, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Yes, I would have thought something similar would work OK...? (Apart from IE6)
#left {float:left; width:200px; height:200px;  
#right {float:left; margin-left:0; min-width:200px;
height:300px; background:#8f8;}

No need for the @media rule IMO, as the #right container should flow beneath the #left as the width reaches 200px.

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


11:29 pm on Oct 16, 2011 (gmt 0)

5+ Year Member

That's what I thought too, but try it out. In every browser I tested #right flows beneath #left when the space to the right is less than #right's max-width, not its min-width (if there is no max-width it goes below when its content or its min-width is wider than the space available to the right).

Featured Threads

Hot Threads This Week

Hot Threads This Month