How do you set a floating div's width to take up remaining space without pushing other divs down?

Question

For part of a layout I want to make, I want to use three divs, all floating next to each other. The Left and Right have a max-width set, which works fine, but I want the middle div to expand its width to fill the remaining space. To clarify, the left and right divs may have a width of anywhere from 0px to the max-width, depending on what is in each, and I want the middle div to expand its width so that it takes up the rest of the space not used by the divs on either side.

The problem it's having now is that if there is a lot of content in the middle div, it's expanding and pushing the right div off to the next line instead of keeping it up with the other two.

Here's the css I have so far:

#left-column {
 width: auto;
 max-width: 200px;
 height: auto;
 float: left;
}

#middle-column {
 float: left;
 width: auto;
}

#right-column {
 width: auto;
 max-width: 200px;
 height: auto;
 float: right;
}

...and the HTML:
<div id="left-column">...</div>
<div id="middle-column">...</div>
<div id="right-column">...</div>

I think that this can be accomplished using a three-column, single-row table, but I absolutely do NOT want to use tables - I want to accomplish as much as possible by using pure css.

Thanks!

Answer 1

Classic Floats

If you order it:

<div id="left-column"></div>
<div id="right-column"></div>
<div id="middle-column"></div>

and you float the left column left, and the right column right, the middle column should fill in the remaining space. You will have some issues with margins, borders and paddings though.

---

Flexbox

If you don't need to support older browsers, you can use flexbox. With flexbox, this sort of structure becomes much simpler, and the markup doesn't need to change.

You will need to be able to select the parent element, so for the purposes of this demo, the code will be wrapped by <div class="wrapper">.

.wrapper {
  display: flex;
  flex-direction: row;
  height: 200px;
}

.left {
  background-color: red;
  width: 100px;
}
.middle {
  background-color: green;
  flex: 1;
}
.right {
  background-color: blue;
  width: 100px;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

The height and widths are added explicitly so that the <div>s are visible. With actual content, the columns would automatically adjust.