Problem with my wrapper div

Good day :slight_smile:

I’m an I.T student (currently having my practicum) and I’ve been reading sitepoint articles during my senior year.

I’m having a problem with the website I’m coding. you see the background color for the site doens’t show up…

<div id = “wrapper”>
<div id = “header” >…</div>
<div id = “navigation” >…</div>
<div id = “upper-left”>…</div>
<div id = “lower-left”>…</div>
<div id = “footer”>…</div>
</div>

here’s the css

body{
margin:auto;
font-family:Arial, Helvetica, sans-serif;
background-color:#efefef;
background-image:url(…/images/background.gif);
background-repeat:repeat-x;
}

#wrapper{
width:890px;
position:relative;
margin-right:auto;
margin-left:auto;
background-color:#FFFFFF;

}

But when I declare a height for the wrapper div… the background color shows up…

The last I heard was that adding overflow:auto to your wrapper solves this problem the cleanest possible way for pretty much all browsers:

http://www.sitepoint.com/examples/clearing_floats/example2.php

mentioned here

as well as discussion of other fixes for this.

Are any of the other layers floated?

Try adding:

<div id = “wrapper”>
<div id = “header” >…</div>
<div id = “navigation” >…</div>
<div id = “upper-left”>…</div>
<div id = “lower-left”>…</div>
<div id = “footer”>…</div>
<div style=“clear: all”></div>
</div>

It will clear the floats and stretch down the wrapper layer :wink:

i’ve changed the entire layout to float… but i have a problem in firefox it seems the gray box column at the right has an upper margin… and my home link position is different in ie7 and firefox.

here’s the link again
http://amgskilledhands.org/

ok thank you very much … actually i’m building right now a floated version of that layout…

thank you sir

btw here’s the url of the site i’m working on
http://amgskilledhands.org/

well, you use position:absolute, so that changes pretty much everything and makes it impossible as far as I know to add a background to the wrapper the way you want it without adding a width to the wrapper.

position:absolute isn’t the best approach to building a layout like that, look into how to achieve a 2 column layout using floats.