Welcome to WebmasterWorld Guest from 54.145.174.178

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'>
<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]

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

5+ Year Member



I found an interesting CSS3 solution in w3.org's layout: change
#left
's
position:absolute;
to
float:left;
, 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;  
background:#f88;}
#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).