Image

I’m trying to put a img on #mainContent and it works then the .centerContent still works then #rightSidebar and the bg img will not show. Could some tell me what I’m doing wrong?

<style>
#mainContent {
background-image: url(images/innerwrapper.png);
background-repeat: repeat-y;
}
.centerContent {
width: 620px;
float: left;
padding-bottom: 20px;
}
#rightSidebar {
padding-bottom: 20px;
padding-right: 5px;
width: 250px;
float: right;
}
</style>
</head>
<body>
<div id=“mainWrapper”>
<div id=“headerWrapper”></div>
<div id=“nav”></div>
<div id=“mainContent”>
<div class=“centerContent”> </div>
<div id=“rightSidebar”> </div>
</div>
</div>
</body>

HI,

I’m not quite sure what you are asking but you do need to clear your floats or the mainConent will have no height because floats are removed from the flow.

Add overflow:hidden here:


#mainContent {
	background-image: url(images/innerwrapper.png);
	background-repeat: repeat-y;
[B]overflow:hidden[/B]
}

If you need visible overflow then use another clearing technique as documented in the css faq on floats (see my sig).

Thanks the overflow:hidden worked. Heading over to read now thanks for the link.