Can I set the background color of a wrapper div? [Archive]

realmuffin

08-14-2009, 03:37 PM

I'm trying to set up a website for a friend and I'm having trouble getting a background color where i want it..

The structure is standard:

<body>
<div id="wrapper">
<div id="header">

</div>
<div id="container">

</div>

<div class="sidebar">

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

</div></div>
</div>
</body>

and here is the CSS:

body {
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #bdded5; <--this color shows up where i expect the wrapper div to make it white
color: #000000;
}

#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
background: #FFFFFF; <--this is what doesn't work
overflow: hidden; <---- update to this post, i have found that adding this fixes the problem, but it seems counterintuitive--does anyone know what makes this work? It seems like it should hide everything...
}
#header{
float: left;
width: 750px;
}
#container{
float: left;
width: 530px;
}
.sidebar{
float: left;
width: 210px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
#footer{
clear: both;
float: left;
width: 750px;
padding-top: 10px;
}

The site is supposed to be a 750px wide (centered with white background), and outside of that (the space that is left over to the left and right) should be #bdded5.

Any help will be greatly appreciated! :)

WebJoel

08-14-2009, 08:00 PM

the correct syntax when just one declaration/value is used, is:

background-color:#ffffff;

You can leave off "color" when you use several declarations in one selector

for instance, adding an image with a background-color, becomes:

background: #fff url(path/filename.ext) center center no-repeat