homepage Welcome to WebmasterWorld Guest from
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

CSS Div Layout Q
Should be a simple one
Robert Poole

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

Float the main nav?

Robert Poole

 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!


 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

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