Change column height as other column gets longer

Question

Hi,

I have tried a few things to solve this problem but I can't seem to get it working.

The problem is that I have 2 columns as the main part of my website, right and left. On some pages, there is a lot of text in the left column, therefore it is very long, the problem is that the right column doesn't elongate with the left column.

Both columns have the same background colour and a footer s displayed across the width of both columns after the columns finish.

My first thought was to put both columns inside a div which would have the same background colour as them and therefore if the left column became 1500px long in total and the right column stayed at around 600px (due to the elements inside it) then this wouldn't show as the new, outer div would elongate along with the left column. But for some reason this didn't work. Could it be because the columns are floated?

Does anyone have any other ideas?

Here is the website (Obviously not finished yet): Beansheaf Hotel

I have chosen a page where there is a lot of text in the left column so the problem is apparent. Thanks in advance,

InfinitiFizz

Answer 1

This fella solved it: http://www.ejeliot.com/blog/61

Also, the comments further down on this article provide one or two other approaches, like using display:table.

The floated nature of your columns are indeed the cause of the containing div not expanding, you're correct. So try using the technique described thoroughly here: http://www.positioniseverything.net/easyclearing.html

It's worth reading around the subject to understand Why, What and How, because many people find the need to do this all the time, not just for columnar layouts.

Answer 2

You can give the main div the css property display:table; than give the inner divs the property display:table-cell;. Otherwise you would need to use a <table> and place contents inside <td> s. The preceding gives you something like:

Answer 3

Here is another link I found helpful:

http://www.alistapart.com/articles/fauxcolumns/