homepage Welcome to WebmasterWorld Guest from 54.81.170.186
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS Div Layout Q
Should be a simple one
Robert Poole




msg:3842908
 12:28 pm on Feb 5, 2009 (gmt 0)

Okay, so I'm trying to get into div layouts rather than table layouts, so I'm on a bit of a crash course trying to figure things out as I go. The funny thing is I think I've just about got it to work in IE but not Firefox :oS Surely such a thing isn't possible!

So here's the CSS and the HTML:

body {
margin:30px;
background-color:#693;
padding:0;
}
div {
background-color:#fff;
}
.subnav {
width:200px;
height:300px;
background-color:#999;
}
.main {
height:500px;
}
.login {
position:absolute;
top:180px;
left:10px;
width:150px;
height:40px;
background-color:#ccc;
}
.top {
height:120px;
width:100%;
margin-bottom:10px;
}

<div class="top">Top</div>

<div class="login">Login</div>

<div class="subnav" style="float:left; margin-right:10px;">Sub Nav</div>
<div class="main">Main</div>

So it's supposed to be a "top" bit, then a left hand nav 200px wide, then a main section to fill the rest of the width. Firefox though, seems to put the main div underneath the nav section rather than next to it...

Any thoughts?

 

simonuk




msg:3843016
 3:43 pm on Feb 5, 2009 (gmt 0)

Float the main nav?

Robert Poole




msg:3843043
 4:08 pm on Feb 5, 2009 (gmt 0)

Hey Simon, thanks for your response.

Unfortunately when float is applied to the div it stops filling out the necessary width, although it is in the right position!

simonuk




msg:3843352
 10:17 pm on Feb 5, 2009 (gmt 0)

Ah yes but you haven't supplied the div any width so Firefox doesn't know what to do with it so it correctly reduces it to the smallest state so the content inside the div would control the width. If the main div was the only one then you can set it with no widths or floats but in this case you have two divs beside each other so you will need to specify the widths so they align correctly.

The best way would be to float the left div and add a certain percentage width (say 20% if you remove the right margin) and then float and add a width of 80% to the main div.

Robert Poole




msg:3843592
 9:09 am on Feb 6, 2009 (gmt 0)

Unfortunately I'm not sure that's going to cut it. I need the left box to be fixed at 20px, then after a 10px gap I want the main box to fill the rest of the screen so I'm not going to know it's width... I just want it to stretch to fill the gap.

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved