Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Div Layout Q

Should be a simple one


Robert Poole

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

5+ Year Member

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 {
div {
.subnav {
.main {
.login {
.top {

<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?


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

10+ Year Member

Float the main nav?

Robert Poole

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

5+ Year Member

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!


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

10+ Year Member

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

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

5+ Year Member

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month