Make div fill remaining space of parent

Answer 1

Getting the correct position and width of .bottom appears to be the biggest hurdle for a cross-browser, CSS solution.

Options

1. Floats

As @joeellis demonstrated, the flexible widths can be achieved by floating only the left column, and applying overflow:hidden to the right column.

The position of .bottom cannot be achieved in any browser. There's no CSS solution for floated columns with equal, variable height. An absolutely positioned .bottom element must be inside the right column div, so that 100% width would give it the correct size. But since the right column won't necessarily be as tall as the left column, positioning .bottom with bottom:0 won't necessarily place it at the bottom of the container.

2. HTML tables and CSS tables

The flexible widths can be achieved by giving the left cell a width of 1px and not specifying a width for the right cell. Both cells will grow to fit the content. Any extra space will be added to the right cell alone.

If .bottom is inside the right table cell, the position can't be achieved in Firefox. Relative position has no effect in a table cell in Firefox; absolute position and 100% width would not be relative to the right table cell.

If .bottom is treated as a separate table cell in the right column, the correct heights of the right and bottom table cells cannot be achieved in any browser other than Firefox. Table cells aren't flexible in height the same way they are in width (except in Firefox).

3. CSS3 flexbox and CSS3 grids

Flexbox and grids are the promising layout tools of the near future. But flexbox isn't supported by IE9 or earlier, and grids aren't supported by any browser other than IE10. Haven't tested if either can achieve this layout, but browser support may prevent them from being an option at present.

Summary

• Floats don't offer a solution for any browser.
• HTML tables and CSS tables don't offer a cross-browser solution.
• Flexbox doesn't offer a potential solution for IE9 or earlier (and may or may not offer a solution to other browsers).
• Grids only offer a potential solution to IE10 (and may or may not offer a solution there).

Conclusion

There doesn't appear to be an adequate CSS solution at present, one that would work in enough relevant browsers, with the possible exception of flexbox (if support for IE9 and earlier isn't required).

jQuery

Here's a couple modified demos that use jQuery to force the columns to have the same height. The CSS and jQuery for both demos is the same. The HTML only differs by how much content is in the left and right column. Both demos tested fine in all browsers. The same basic approach could be used for plain JavaScript.

• Taller content on the left
• Taller content on the right

To keep things simple, I moved the internal padding for the left and right div to a child element (.content).