1 reply [Last post]
Martagnan
Offline
Regular
uk
Last seen: 12 years 41 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

Ok!

(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?

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Div Heights!!!! Argghhhh!

Hi,

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.

http://www.redmelon.net/tstme/3cols2/noborder.htm

I hope you find it useful and informative.

Paul