homepage Welcome to WebmasterWorld Guest from 54.167.173.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Is this layout possible?
Skier88




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

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]

 

Skier88




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

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.

penders




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

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]

Skier88




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

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).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

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