www.webdeveloper.com
Results 1 to 2 of 2

Thread: Can I set the background color of a wrapper div?

Threaded View

  1. #1
    Join Date
    Jul 2009
    Posts
    77

    Question 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:
    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>
    and here is the CSS:
    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;
    }
    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!
    Last edited by realmuffin; 08-14-2009 at 04:19 PM. Reason: found a solution

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles