Three column layout with fixed width centered column problem

three column fixed centered column repeat-x

[morinel]

Suppose I have a three column layout with a fixed width centered column and a left and right column that should take up the remaining screen real estate. I need to use background-repeat: repeat-x to fill up the backgrounds in these left and right columns.

The following does not work:

#container {
margin: 0px;
width: 100%;
}
#left {
background-image: url(bg_left.gif);
background-repeat: repeat-x;
position: absolute;
left: 0px;
height: 113px;
}
#right {
background-image: url(bg_right.gif);
background-repeat: repeat-x;
position: absolute;
right: 0px;
height: 113px;
}
#center {
width: 740px;
margin: 0px auto;
}

<div id="container">
<div id="left"></div>
<div id="center">Lorem ipsum...</div>
<div id="right"></div>
</div>

The problem is that the left and right columns do not fill up the remaining width of the screen. They are only as wide as the content I put in them, but actually I do not want to put any content in them, because the only reason for their existence is the repeat-x background image. Specifying width: auto does not work, nor does specifying max-width or min-width.

Thanks in advance!

morinel

[ronin]

Instead of having left, right and central columns, why not give the container div (or a new container div) a 100% width and set the repeating image as the background to the container?

Then you can centre the middle column with margin: 0 auto; and what you can see on either side of the middle column will be the repeating image.

<edit> Sorry, my mistake, you have two different .gifs don't you? One for the left and one for the right. In that case, I would give the left column a width:48%; and float:left; and the right column a width:48%; and float right; .

Then the central column should sit happily over the top of both, in the middle of the screen.
</edit>

[morinel]

Yes, two different GIFs. Found the answer by using two 50% divs and an absolutely positioned container GIF with a non-transparent background.

Thanks.

morinel