How might I force a floating DIV to match the height of another floating DIV?

Question

My HTML code is just dividing the pages into two columns, 65%,35% respectively.

Answer 1

The correct solution for this problem is to use display: table-cell

Important: This solution doesn't need float since table-cell already turns the div into an element that lines up with the others in the same container. That also means you don't have to worry about clearing floats, overflow, background shining through and all the other nasty surprises that the float hack brings along to the party.

CSS:

.container {
  display: table;
}
.column {
  display: table-cell;
  width: 100px;
}

HTML:

    
Column 1.
    
Column 2 is a bit longer.
    
Column 3 is longer with lots of text in it.

Related:

• jsfiddle
• Using CSS “display: table-cell” for columns