Column repeater problem

[nicky77]

Hi, I've got a problem on a page i'm working on where i want to have a section of the left and right hand side columns to repeat a background-color in line with the amount of text in the central column of the page. I'm struggling to work out how to do this, possibly due to already having so many floated elements on my page. I've had a go at it but I'm certain I'm not on the right lines, grateful for any help!

The example page is at http://www.maguiresonline.co.uk/deve.../test_page.htm
The repeater columns are currently showing as black lines on each side.
The relevant css file is styles.css

[Paul O'B]

Hi,

You can't simply make an element repeat to the bottom of a parent as CSS doesn't work like that I'm afraid. When you specify 100% then the element will be the full 100% of it's parents height but only if the parent has a specific height defined. If the parent is a min-height element or is height:auto then the 100% will collapse to auto.

However even if you do manage to get the 100% to work (IE will often do this) then you get a full 100% again so if you start your element half way down the page it will travel for a whole page length and not just down to the bottom.

One further complication is that because you have set it at 100% then it can't expand anymore either.

Suffice to say you will very rarely use 100% height except on the html and body elements. Read the faq on 100% height for morre information on this

Therefore remove your 100% heights from #container and remove your repeater columns completely as they will not work in that format. The easiest way to repeat columns that match the height of either column is to make a background image and repeat it on the main container. That way you can be sure the columns will always go to the bottom.

Here is an example that uses this image to create this layout.

The only thing you need to remember is that you will need to hide the top part of the column if you don't want it to show. This is easily done by ensuring the content at the top has a background colour that will hide the image where you don't want it to show.

There are other ways of doing this without using images but involve extra mark up.

[nicky77]

Many thanks for your reply Paul. That makes a lot of sense, I'm going to go with the background image suggestion and only allow it to show at the point on the page where i need the repeating columns. Cheers for the pointers on 100% height too!