Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

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

My Threads

Hot Threads This Week

Hot Threads This Month

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved