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

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.

Answer 2

I don't want to dredge up an old thread here but I was looking for a solution to my own problem and came across this and I thought I'd better share with Francisco...

Tables are a terrible idea for positioning layout, the main problem is that before a table will show/render in the browser it has to render it's </table> tag.

Could you imagine if Facebook's column content used a table for it's layout, it would take ages for it to render anything to the screen when checking your timeline for instance! Another issue is that tables behave extremely differently in each browser.

Basically: <table> for layout = NO!, <table> for listing out rows of data or information = YES!