Page 1 of 1

CSS #wrapper background color don't show up

Posted: Mon Apr 04, 2005 3:01 pm
by ljCharlie
I'm creating a page that somehow all the DIVs are not showing up correctly inside the wrapper. It looks right in Dreamweaver MX 2004 but when actually previewing the page, the background of the wrapper does not show through and only the background of the body is showing instead. Below are my codes:

in the CSS file:

Code: Select all

#wrapper {
	margin-left:auto;
	margin-right:auto;
	width: 720px;
	background: #FFFFFF;
	border: thin solid #FF0000;
	position: relative;
}
#topLogo {
	background-color: #000066;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: bolder;
	color: #FFFFFF;
	padding-left: 5px;
	padding-top: 5px;
}
#logoTag {
	background-color: #000066;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #CCCCCC;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 5px;
}
#topHMenu {
	background-color: #FF6600;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	padding-left: 5px;
	height: 25px;
}
#wrapper {
	margin-left:auto;
	margin-right:auto;
	width: 720px;
	background: #FFFFFF;
	border: thin solid #FF0000;
	position: relative;
}
#leftSideVMenu {
	background-color: #FF9900;
	width: 180px;
	padding-left: 5px;
	float: left;
}
#centerMainContent {
	padding-left: 5px;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	float: left;
	width: 386px;
}
#rightSidePic {
	float: right;
	width: 144px;
}
And here is the Body of the html file:

Code: Select all

<body>
<!-- #wrapper start here -->
<div id=&quote;wrapper&quote;>
		<div id=&quote;topLogo&quote;>My Log Goes Here</div>
		<div id=&quote;logoTag&quote;>This is the tag of my logo.</div>
		<div id=&quote;topHMenu&quote;>Menu goes here</div>
	<!-- #pagecontent start here -->			
	<div id=&quote;pagecontent&quote;>
<!-- #sideMenu start here -->		
		<div id=&quote;leftSideVMenu&quote;>
      		<p>ABOUT Page</p>
        	<p>WELCOME</p>
        	<p>HISTORY</p>
        	<p>MISSION</p>
        	<p>GOALS</p>
        	<p>VISION</p>
        	<p>STAFF</p>
    	</div>
<!-- #sideMenu end here -->
<!-- #mainContent start here -->
    	<div id=&quote;centerMainContent&quote;>
    	  <p>Main body texts goes here.</p>
   	  </div>
<!-- #mainContent end here -->
		<div id=&quote;rightSidePic&quote;><img src=&quote;images/aboutfnd1.jpg&quote; /></div>
	</div>
<!-- #pagecontent end here -->	  
</div>
<!-- #wrapper end here -->	
</body>
Any help is appreciated.

ljCharlie

Posted: Mon Apr 04, 2005 3:24 pm
by feyd
two #wrappers, same code... :?

anyway.. try using background-color instead of background maybe.

also, try using a class version.

Posted: Tue Apr 05, 2005 4:35 am
by zenabi
1. Remove the extra #wrapper code from your CSS as feyd pointed out.
2. Add overflow: auto to your #wrapper

Code: Select all

#wrapper {
	margin-left:auto;
	margin-right:auto;
	width: 720px;
	background: #FFFFFF;
	border: thin solid #FF0000;
	position: relative;
	overflow: auto;
}
For more information on this "fix" see Super Simple Clearing Floats