Can I set the background color of a wrapper div?
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:
and here is the CSS:Code:<body> <div id="wrapper"> <div id="header"> <!--content removed for simplicity's sake--> </div> <div id="container"> <!--content removed for simplicity's sake--> </div> <div class="sidebar"> <!--content removed for simplicity's sake--> </div> <div id="footer"> <!--content removed for simplicity's sake--> </div></div> </div> </body>
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.Code: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; }
Any help will be greatly appreciated!
Reply With Quote
Bookmarks