Make div fill remaining space of parent

Answer 1

Sibling elements of same height and staying on the same row can be achieved by displaying them as table-cell and parent as display: table.
Working fiddle: http://jsfiddle.net/SgubR/2/ (which also display the overflow: hidden along a floating element technique for creating a column. The latter needs a clearfix)

Table-cell in CSS uses any HTML element you want (section, div, span, li, whatever), its semantics is unrelated to table, tr and td elements used for table layout (except that the visual result is the same, that's what we want).

• display: table is set on a parent
• display: table-row may be used on an element in-between but if it works without it, fine
• display: table-cell is set on each child
• a width is set on none, some or all these "cells". Browser will adapt both to content and widths set in order to calculate their widths (and total width of parent, obviously)
• table-layout: fixed will tell browsers to switch to the other table layout algorithm where they don't care about the quantity of content, only to widths set by CSS
• vertical-align: top will be needed in most cases (but you may set other values, great for complex layouts)
• margins aren't applied on "cells", only padding. Margins only apply on table itself. Though you still can separate "cells" with border-collapse: separate and/or border-spacing: 4px 6px

Compatibility: IE8+
Fallback for IE6/7 if needed is exactly the same as for inline-block

Longer explanations in previous answers: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)