Column height dependent on content column

[Persist01]

Hi,

I have 3 div columns. Columns 1 and 3 have different colored backgrounds. Column 2 is white background and contains the content.

I want the heights of columns 1 & 3 to increase according to the height or the amount of content in column 2.

I have tried using

height=auto

in the css for columns 1 and 3 but it doesn't seem to keep the height set to the height of column 2.

Is it more likely that I am not setting up the divs correctly or am I missing something else?

[lio04]

You must set attributes to main content div, because it will dependent by the size of content inside.

I have this:

#content {
	width: 545px;
	min-height: 600px;
	margin-top: 3px;
	border: 1px solid gray;
	background-color: black;
	float: left;
}

Btw> Internet Explorer ignore attribute min-anything, there is height the same as min-height in Opera, FF...

[MidiMagic]

Careful. Putting size styles (width, height) and surrounding styles (margin, border, padding) in the same style or tag causes IE/FF incompatibilities.

Nest two divs, ome with the sizes, and the other with the surrounding styles.

[Persist01]

Careful. Putting size styles (width, height) and surrounding styles (margin, border, padding) in the same style or tag causes IE/FF incompatibilities.

Nest two divs, ome with the sizes, and the other with the surrounding styles.

Ok thanks.

Lio04 - how will columns 1 & 3 change their height with what you have for the main content div? What do you have for the divs for columns 1 & 3?

MidiMagic - from what you have suggested for the div with the sizes - do I need to mention height in this div if the columns 1 & 3 are relying on the height of column 2?

[MidiMagic]

Divs are implemented poorly. They usually will not expand larger than their own contents.

This might be one of the cases where table works better than div. Table forces all of the columns to be the same height.

The use of table is not deprecated. What is being discouraged is using table to create margins and padding.