1 reply [Last post]
Last seen: 16 years 17 weeks ago
Joined: 2003-08-27
Posts: 21
Points: 0


(I have set a height 100% in my body)

I have 1 large 'container' div holding 3 columns.
The center column holds content and the 2 flanking columns are navigation.
Both flanking columns have a background image.

I need the 2 flanking (navigation) columns to ALWAYS be the same height as the content column.

Any ideas?

Hampshire UK
Last seen: 11 years 34 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Div Heights!!!! Argghhhh!


What you want isn't easily available in CSS. There are some javascripts going around that will calculate the column heights and adjust each column accordingly. (Just do a search you should find them).

However there is a CSS method that relies on using the side borders of a div to give the effect of a full size column.

The borders are set to the size of the required column.(e.g. border:150px solid #fff;) and then the column content is floated in the border using a negative offset from the parent div. As the borders are part of the div they will always expand with the content. (In truth its a little more complicated than that.)

This technique is I believe the only way to achieve the appearance of the three column layout where each column stays the same size. Here is a link to the layout and its author Doug Livingstone.


I hope you find it useful and informative.