css content areas, borders and expanding images

Hi there guys,

This is my first visit to this site and I must say it is very useful and a great asset to anyone beginning to learn to code.

I am on my first attempt at putting together a site for a content management system.

I have set up the header and the area for the links, but, I am now on the content area and I have tried to play around a bit, but I would be really grateful if I can get some help on it.

The *current progress* can be found here:


http://testing.elitestrikeforce.com/first_site/test2/test3/e107.html


The css and html is all in the source there for now.

If you go to the here:

http://testing.elitestrikeforce.com/first_site/test2/test3/ESF wesite in progress V3.jpg

you will see the jpg of what the site is eventually going to look like (though there is only 1 content box at the moment as they will all be the same).


What I am doing for the content areas is as follows:


<div id='content_wrapper'>
<div id='content_wrapper_lb'>
</div>
<div id='content_wrapper_center'>
</div>
<div id='content_wrapper_rb'>
</div>
<!--Footer-->
</div>



So, if you look at the source on the site, you will see that the content wrapper is supposed to encompass the left border, the content wrapper center and the right border - (it is annoying to have to build the borders like this, but I could not think of any other way).

once I have figured this out, there will be further content boxes inside the content_wrapper_center to contain the menus and news etc.


The difficulty I am having is that I want the left and right (and center) content area images to repeat in the y direction, to the height of the main overall content wrapper while things inside the center content wrapper expand down the page.

At the moment, the left , right and center seem to be expanding independently from one another and not filling the outer content wrapper as the center content wrapper grows.

I have used some testing text to show what happens when the content wrapper center grows.

I hope I have been clear enough for you guys to be able to give me some assistance - If I have not been, please do shout.

Many thanks in advance for your help,

Zed.

The difficulty I am having is that I want the left and right (and center) content area images to repeat in the y direction, to the height of the main overall content wrapper while things inside the center content wrapper expand down the page.
.left {
background-image: url(link to image);
background-repeat: repeat-y;
width: width of image px;
length: length of image px;
}
<div class="left">
Content here
</div>Do you mean something like that?

If it isn't what you mean, then I apologize, I'm very slow...

First of all, there is no need to apologise :D - I would like to thank you for replying :)


It's not quite what I was looking for though - I will try and explain a little more succinctly:


The #content wrapper contains 3 elements "left border, center, and right border".

This is for a cms, where the centre area will expand to height "n". I want the centre area to expand, thus pushing the main content wrapper down. I also want the left and right borders to fill the y-direction to the bottom.

So, as you can see from the temporary site link:

http://testing.elitestrikeforce.com/first_site/test2/test3/e107.html


the central blue is pusing the overall content wrapper (pink down), but the left and right borders are not filling in the y-direction to the same height as the overall wrapper - hence the pink background of the overall wrapper is showing.


I hope this helps you to help me as it were :D

If I can be clearer, please shout :D

Thanks again,

Zed.

Hmm, I thought this might be the case - I have was looking into some positioning things and came across brainjar.com:

http://www.brainjar.com/CSS/positioning/default3.asp

There I found this quote:

Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it.

the 3 images (left wrapper, center wrapper and right wrapper images) are inside the "content wrapper", and perhaps this is the reason they are not all meeting at the height of the content wrapper?

I would be really grateful of a solution anyone might have :D

Many thanks in advance,

Zed.