Hi,

I am having trouble getting a background image to be displayed in my main div content container. This is to create a background color. I have the main content container and inside of that container I have 3 other containers. These are the leftContent div, middleContent div and rightContent div. I want to have the background color to be visible throughout the 3 containers so I have placed it in the mainContent container.

CSS Code:

#mainContent {
background-image: url(bg.jpg);
background-repeat: repeat-y;
background-color: #35281E;
width: 915px;
height: 500px; *** only works with height for me? ***
}

#leftContent {
width:167px;
background-color:#E7E7E7;
float:left;
padding: 10px;
}

#middleContent {
float:left;
padding: 15px;
width: 417px;
}

rightContent {
float:right;
padding: 15px;
width:250px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #E7E7E7;
}

html code:

<div id="mainContent">

<div id="leftContent"> </div>
<div id="middleContent"> </div>
<div id="rightContent"> <div>

</div>

Can someone please advise if I have the css correct for the mainContent div as the only way I can get the image to display is by placing a height value into the mainContent div. This makes the page a certain height and when I add text into the middleContent container the text moves down but the background image is fixed to a certain height. However, I want this image to move downwards with additional text instead of been fixed to a certain height. Any help is appreciated.

regards,
elv8.

Clear your floats

Originally Posted by chrishirst

Clear your floats

Hi chrishirst, I have cleared the floats on all the 3 div containers but what happens is all 3 div containers now are placed below each other down the page. I have looked at the links you sent me but still am confused with the code and still doesnt work.

The background image does expand downwards in the main div container but the problem is the 3 div containers are meant to be positioned in a 3 column layout but instead are layered down without the float been used in the 3 divs. The main div container is only used to display a backgroud image for the embedded 3 div containers.

Is there a way to display this accross the page rather then down the page?

URL needed so we can see what the problems are.

Seems odd that it's not displaying.

Have you tried:

min-height: 500px;

Originally Posted by lightspeed

Seems odd that it's not displaying.

Not really odd,

If the floats aren't cleared properly, the element has nothing to contain so it will collapse.

And min-height will NOT be supported in IE6.