CODEWITHSUNDEEP
cssresponsive-designfluid-layoutmultiple-columns
George Mauer
George Mauer

Reputation: 122092

Css - size one floated column to same height as another

Reading through some of the answers to similar questions, I'm still not clear on whether this is possible.

Consider the situation of 2 floated columns inside a clearfix-ed container. Column1's contents can grow and determine the height of the container. Column2's contents are always guaranteed to be less then Column1 but its height should stretch to fill the container.

How on earth to get Column2 to stretch?

Here's the jsbin (With Column2 not stretching)

Things I do not want to do

I can figure out something with these techniques, but consider this an academic excercise. I'm trying to figure out whether css provides a "correct" solution that I can just commit to memory and be done with it. My suspicion is that the answer might be in one of the following techniques which I do not yet fully understand.

Upvotes: 1

Views: 303

Answers (1)

robertc
robertc

Reputation: 75707

Like you suspect, table CSS will work so long as you don't need to support oldIE:

section {
  width: 50%;
  display: table-cell;
  box-sizing: border-box;
  border: solid grey 1px;
}

Flexbox could also be made to work, but beware the significant differences between what's currently implemented in browsers and what the current draft says.

I've not used Twitter bootstrap in anger so I'm not in a position to comment on it.

Upvotes: 1

Related Questions