How to make a div height to fill available space

Question

I have a 3 column layout with some details below the columns.

You will not

Answer 1

Currently your columns are spanning as far as the text can go. If I get your question correctly, you would like the columns background color/ image to extend beyond available data. If that is what you want, then you have to create fake columns (Faux Columns) since your data in those columns do not span the whole height.

I think the easiest way is to apply a repeating backgroung image to an element WHICH spans the full height of your layount. This could be some sort of wrapper that encloses your columns. In your case you may apply a thin image that is divided into three color bands (18em each and each mapped to cover a particular column) for the info, comp and story divs. That image would be 60em in width and would repeat in the y- axis e.g:

#content 
{
background: #ccc url(fake-columns.gif) repeat-y left top;
}

This assumes the image is in the same folder as the css file (not recomended, images/fake-columns.gif is better so that the image is referenced from the image folder). Repeat-y will repeat the tiny image downwards covering the whole height the content div covers. Left top ensures the image starts tiling from the top left corner which is what you would normally want to do! The pound symbol before content seems to dissapear from my example css above.