Problem with CSS Layout

**danburzo** · 05-21-2005, 06:38 AM

I have some nested divs:

Code:

<body>
<div id="page">
   
   <div id="main">
      <div id="content">...</div>
      <div id="right">...</div>
   </div>

</div>
<div id="footer">...</div>
</body>

to which i've applied the styles:

Code:

body {
   text-align: center;
   background: #2E2E2E;
   margin: 0;
   padding: 0;
}

#page {
   width: 750px;
   margin: 0px auto;
   text-align: left;
   background: #FFFFFF;
   }

#main {
   width: 750px;
   background: #FFFFFF;
}

#content {
   width: 510px;
   float: left;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
   background: #FFFFFF;
}

#right {
   width: 159px;
   float: left;
   color: #C03400;
   border-left: 1px dotted #333333;
   padding:20px;
   background: #FFFFFF;
   }

notice that the background color of the page is a dark grey. I want the whole "main" div to have a white background. I've set background:#ffffff, as you see, but it only works in IE.

How can i make it work in Firefox?

**chrishirst** · 05-21-2005, 08:53 AM

background-color is what you need

**danburzo** · 05-22-2005, 02:41 AM

Still not working... I mean this isn't the problem, here are some screenshots of what my page looks like in IE and FF:

Firefox:

IE:

I want the page to look somehow like in IE... i mean the whole #main div to have a white background. I think the problem is about the two divs , #content and #right being floats.

**chrishirst** · 03:58 AM

Your divs aren't nested properly for content and right to affect each other. IE gets it wrong by standards, though it does work as you would expect it to logically and sets child divs without a explicit height to 100% of the parent container though to standards it should be to the contents of the child.

A few small mods gets this

http://www.candsdesign.co.uk/demo/danburzo/

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
   text-align: center;
   background: #2E2E2E;
   margin: 0px;
   padding: 0px;
}

#page {
   width: 750px;
   margin: 0px auto;
   text-align: left;
   background: #FFFFFF;
   }

#main {
   width: 750px;
   background: #FFFFFF;
}

#content {
   float: left;
   padding: 20px 0px 20px 20px;
   background: #FFFFFF;
}

#right {
   width: 159px;
   float: right;
   color: #C03400;
   border-left: 1px dotted #333333;
   padding:0px 20px 20px 20px;
   background: #FFFFFF;
   margin:0px 0px 0px 20px;
   }
#footer {
   position:relative;
   text-align:center;
   clear:both;
   color:#FF0000;
   background-color:#FFFFFF;
}
</style>
</head>

<body>
<div id="page">
   
   <div id="main">
      <div id="content">
Content
	  <div id="right">
Right Side
	  </div> <!-- right -->

      </div> <!-- content -->
   </div> <!-- main -->

<div id="footer">Footer</div>
</div> <!-- page -->

</body>
</html>

Note: if the content in "content" extends below the right side it will wrap around the right side.

**OmuCuSucu** · 04:00 AM

hmmmm ....

i remember having problems with exactly that same thing before.

though i remember solving it in a really odd way LOL.

go with chrishirst

**shaber** · 05-22-2005, 05:13 AM

The "content" div is automatically extending to hold it's content. If you set a height value to "content" and "main" of say 100% the background color will extend equally all the way down the page.

In other ways, the background color changes because the "content" div is stopping just below the text.

**danburzo** · 05-22-2005, 05:55 AM

Wow, thanks for the replies.

I found another solution: how about clearing the floats:

Code:

<body>
<div id="page">
   
   <div id="main">
      <div id="content">...</div>
      <div id="right">...</div>
      <div style="clear:both">&nbsp</div>
   </div>

</div>
<div id="footer">...</div>
</body>

seems to work as well.