CSS Div Layout Q

Should be a simple one

[Robert Poole]

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]

Float the main nav?

[Robert Poole]

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]

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]

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.