Using DIV and relative positions in CSS to have elements scale properly

Basically, what I want is to have three elements; a top title element, a left side element and a main element. the main and left elements should be the same distance below the bottom of the top element. The code I have at the moment is a little inelegant, arrived at through experimentation in FF and it doesn't work in IE...

Am I missing something obvious?

Code:

body{background:#9BF8FF; } DIV{ background:#9BFF82; color:#364BE1; position:relative; font-weight:bold; } DIV.title{ height:15%; width:90%; top:5%; left:5%; text-align:center; font-size:x-large; } DIV.left{ height:70%; width:15%; top:10%; left:5%; } DIV.main{ height:70%; width:70%; top:-60%; left:25%; }

I would have a look at this link:

http://www.pmob.co.uk/

Sure to find the layout you want there and all you need to do then is follow the example of how to duplicate it in the future.

That seems to be more about having 3 columns with the side two fixed widths. I'd prefer everything to scale with the browser window.

I've made some progress, but the min-height property doesn't seem to work in FF, and anything inside my container frame doesn't appear at all in IE...

Thanks for the site though, its pretty neat.

hmmm...I thought he had the layout you wanted there. Must have changed it.

These might be of some use also:

http://www.sitepoint.com/forums/showthread.php?t=121128

http://www.sitepoint.com/forums/showthread.php?t=171943

If I get time sometime tonight I'll try to whip up this layout for you. Shouldn't really take to long.

I think you need to add float:left; to your left and main divs

Code:

DIV.left{ height:70%; width:15%; top:10%; left:5%; float:left; } DIV.main{ height:70%; width:70%; top:-60%; left:25%; float:left; }

And then add a clearing br (<br clear="all />) or clearing div.

Max Designs explains css floats much better than I can

How about this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>2 column fluid</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * {margin:0;padding:0} body { background:#fff; font: 81.25%/1.4 Verdana, Arial, Tahoma, Sans-Serif; color: #333; text-align:left; margin: 0 50px 30px 50px; } .banner { margin: 0 0 10px 0; background: #eee; height: 5em } h1 { padding-left: 10px; } .sidebar { float: left; padding: 10px; width: 200px; background: #eee; } .sidebar ul { margin: 0 0 0 20px; } .content { padding: 10px; margin-left: 230px; background: #eee; } .content p { margin: 0 0 1em 0 } </style> </head> <body> <div class="banner"> <h1>Site Title</h1> </div> <div class="sidebar"> <ul> <li><h4>Heading</h4> <ul> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> </ul> </li> </ul> </div> <div class="content"> <h2>Page title</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur feugiat. Fusce malesuada, sapien et malesuada scelerisque, odio erat hendrerit mi, ut pharetra velit lectus at ipsum. Morbi sagittis ullamcorper elit. Suspendisse potenti. Quisque sed eros. Praesent vestibulum. Aenean aliquam bibendum ante. Nam lorem. Etiam ultricies ultrices magna. Aliquam mauris libero, commodo non, molestie interdum, molestie sit amet, tortor. Nullam in pede a ante nonummy hendrerit. Ut a purus et justo viverra sollicitudin. Nam nisl mauris, placerat sed, pharetra a, semper eget, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam at nulla eu nisl malesuada adipiscing. Quisque placerat, lorem id ultricies porta, nisi lacus vulputate augue, ut mattis orci lacus ac mauris.</p> <p>Integer mi metus, mattis ut, auctor id, vestibulum sed, elit. Sed sodales bibendum metus. Cras neque risus, pharetra in, aliquet nec, aliquet et, diam. Cras at enim non mauris pharetra convallis. Donec accumsan tincidunt leo. Vivamus ultrices augue eget tortor fermentum bibendum. Etiam egestas ligula quis nisi. Praesent nulla tellus, sagittis varius, auctor blandit, imperdiet at, lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sollicitudin facilisis mauris. Sed blandit luctus nunc. Nullam felis enim, imperdiet pretium, tincidunt in, blandit ac, odio. Suspendisse dolor. Quisque urna. Fusce facilisis egestas augue.</p> <p>Cras dignissim interdum enim. Suspendisse quis eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus enim. Etiam gravida elit id quam. Proin in justo ac nulla imperdiet consequat. Mauris sapien. In justo. Sed quis eros nec leo ultricies convallis. Sed vitae ante consectetuer enim bibendum rutrum. Etiam vehicula tempor elit. Integer elementum, eros sit amet lacinia adipiscing, tortor mi rhoncus ipsum, sit amet gravida felis nisi vitae eros. Vivamus pede magna, tristique ac, interdum a, pretium a, est.</p> <p>Aliquam tincidunt nunc in nisi rhoncus bibendum. In ut erat vitae metus lacinia adipiscing. Sed vitae massa. Mauris nisi. Nulla facilisi. Mauris interdum. In bibendum augue id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat mattis magna. Proin ultrices pede vel erat. Nunc eu urna.</p> <p>Pellentesque risus. Maecenas nec risus auctor lorem blandit elementum. Vivamus vitae elit ac pede nonummy pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sit amet risus. Nunc sollicitudin augue in nunc. Ut eu lorem. Morbi eleifend lectus sed libero feugiat mollis. Fusce molestie, nibh sit amet nonummy volutpat, dui nisi commodo libero, et posuere lectus magna at enim.</p> </div> </body> </html>

Or even better, less div-itis:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>2 column fluid</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * {margin:0;padding:0} body { background:#fff; font: 81.25%/1.4 Verdana, Arial, Tahoma, Sans-Serif; color: #333; text-align:left; margin: 30px 50px; } h1 { padding: 10px 0 10px 10px; margin: 0 0 10px 0; background: #eee; } ul.sidebar { float: left; padding: 10px; width: 200px; background: #eee; } ul.sidebar li { margin: 0 0 0 20px; } .content { padding: 10px; margin-left: 230px; background: #eee; } .content p { margin: 0 0 1em 0 } </style> </head> <body> <h1>Site Title</h1> <ul class="sidebar"> <li><h4>Heading</h4> <ul> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> <li><a href="#" title="#">Link text</a></li> </ul> </li> </ul> <div class="content"> <h2>Page title</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur feugiat. Fusce malesuada, sapien et malesuada scelerisque, odio erat hendrerit mi, ut pharetra velit lectus at ipsum. Morbi sagittis ullamcorper elit. Suspendisse potenti. Quisque sed eros. Praesent vestibulum. Aenean aliquam bibendum ante. Nam lorem. Etiam ultricies ultrices magna. Aliquam mauris libero, commodo non, molestie interdum, molestie sit amet, tortor. Nullam in pede a ante nonummy hendrerit. Ut a purus et justo viverra sollicitudin. Nam nisl mauris, placerat sed, pharetra a, semper eget, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam at nulla eu nisl malesuada adipiscing. Quisque placerat, lorem id ultricies porta, nisi lacus vulputate augue, ut mattis orci lacus ac mauris.</p> <p>Integer mi metus, mattis ut, auctor id, vestibulum sed, elit. Sed sodales bibendum metus. Cras neque risus, pharetra in, aliquet nec, aliquet et, diam. Cras at enim non mauris pharetra convallis. Donec accumsan tincidunt leo. Vivamus ultrices augue eget tortor fermentum bibendum. Etiam egestas ligula quis nisi. Praesent nulla tellus, sagittis varius, auctor blandit, imperdiet at, lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sollicitudin facilisis mauris. Sed blandit luctus nunc. Nullam felis enim, imperdiet pretium, tincidunt in, blandit ac, odio. Suspendisse dolor. Quisque urna. Fusce facilisis egestas augue.</p> <p>Cras dignissim interdum enim. Suspendisse quis eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus enim. Etiam gravida elit id quam. Proin in justo ac nulla imperdiet consequat. Mauris sapien. In justo. Sed quis eros nec leo ultricies convallis. Sed vitae ante consectetuer enim bibendum rutrum. Etiam vehicula tempor elit. Integer elementum, eros sit amet lacinia adipiscing, tortor mi rhoncus ipsum, sit amet gravida felis nisi vitae eros. Vivamus pede magna, tristique ac, interdum a, pretium a, est.</p> <p>Aliquam tincidunt nunc in nisi rhoncus bibendum. In ut erat vitae metus lacinia adipiscing. Sed vitae massa. Mauris nisi. Nulla facilisi. Mauris interdum. In bibendum augue id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat mattis magna. Proin ultrices pede vel erat. Nunc eu urna.</p> <p>Pellentesque risus. Maecenas nec risus auctor lorem blandit elementum. Vivamus vitae elit ac pede nonummy pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sit amet risus. Nunc sollicitudin augue in nunc. Ut eu lorem. Morbi eleifend lectus sed libero feugiat mollis. Fusce molestie, nibh sit amet nonummy volutpat, dui nisi commodo libero, et posuere lectus magna at enim.</p> </div> </body> </html>

Hope it helps

Thanks for the input everyone, ill try some of this stuff tomorrow when i have a bit more time.

I tried that latest suggestion, its nice, but the sidebar doesn't shrink with the window.

Now I'm having the silliest problem ever. height:x% doesnt want to work at all. nor does min-height... its ridiculous. FF completely ignores the commands, it seems...