Member Avatar for 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?

  • 3 Contributors
  • 4 Replies
  • 117 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The layout problem described (two colored side columns that must grow with the center content) is best solved with a layout mode that lets siblings match heights instead of relying on manual heights or floats. Modern CSS makes this simple: use flexbox so the container stretches its children to the tallest column.

.container {
  display: flex;
  align-items: stretch; /* forces equal height */
}

.side {
  width: 160px;        /* fixed side column width */
  padding: 16px;
  background: #eee;
}

.center {
  flex: 1;             /* fills remaining space */
  padding: 16px;
  background: #fff;
}

Flexbox: the center column becomes the height driver and the side columns stretch to match automatically. This avoids brittle height: X hacks and clearfix issues from floating columns.

If older browser support is required, display: table / table-cell on the wrapper and columns gives the same equal-height behavior without using actual table markup:

.wrapper { display: table; width: 100%; table-layout: fixed; }
.col     { display: table-cell; vertical-align: top; }
.col.side { width: 160px; }
.col.center { width: auto; }

Remarks tied to earlier replies: ’s idea of controlling the main content is sound for baseline sizing, but min-height is often unnecessary with flexbox. is correct that tables force equal heights — prefer CSS table modes or flexbox instead of using presentational <table> for layout.

Troubleshooting notes: ensure a standards-mode doctype, avoid height:100% unless the parent has a set height, and clear floats when still using them (clearfix). For explanations and browser guidance, see MDN’s Flexbox guide (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) and practical techniques at CSS-Tricks ().

Recommended Answers

All 4 Replies

Member Avatar for 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...

Member Avatar for 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.

Member Avatar for 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?

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.