Grow sibling to height of floating columns

Question

I have a 3 column layout, the side columns both have a fixed width, the center column grows to fit the remaining space. I have a clear fix in place to force the parent container to be the height of it's tallest column.

I want to make the center column also grow to match the height of the floating columns if either one is taller, however I do not know how to achieve this.

The HTML is structured as follows:

<main>
    <nav id="left"></nav>
    <aside id="right"></aside>
    <section id="center"></section>

    <div class="clearfix"></div>
</main>

With the following CSS:

main {
    display: block;
    border-bottom: 1px solid red;
    background: #FFFFFF;
    width: 100%;
    min-width: 960px;
    margin: 0 auto;
}

#left {
    float: left;
    width: 192px;
}

#right {
    float: right;
    width: 288px;
}

#center {
    border-left: 1px solid red;
    border-right: 1px solid red;
    overflow: hidden;
}

.clearfix {
    clear: both;
}

http://jsfiddle.net/nfxLcp44/

I tried adding height: 100% to the center CSS but that did not work.

Answer 1

What you are trying to achieve is Faux Columns

So there are a few ways too achieve what you want. You can check here for more info, plus check demos here

in this links above you will find these ways to achieve what you asking:

• Doug Neiner Method (Five Columns)
• Doug Neiner Method (Three Columns, Dif Widths, Source Order Altered)
• CSS Table
• Actual Table
• Nicolas Gallagher Method
• One True Layout Method

Based on your example I used the CSS TABLE solution, which is similar to the code already exists .

main {
  display: table;
  background: #FFFFFF;
  width: 100%;
  min-width: 960px;
  margin: 0 auto;     
  table-layout: fixed; /* this might me optional, further reading here
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout */
  
}
.cell {
  display: table-cell;
  border: 1px solid red;
  padding: 1% /* demo purposes */
}
#left {
  width: 192px;
}
#right {
  width: 288px;
  border-left: 0; /*delete double borders */
  border-right:0 /*delete double borders */
}

<main>
  <nav id="left" class="cell">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </nav>
  <aside id="right" class="cell">Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</aside>
  <section id="center" class="cell">Vestibulum tortor quam, feugiat vitae,</section>
</main>

NOTE: This answer on based on my own answer to another question that you can find here

Answer 2

The easiest way would be to display the divs like table using css. Here is the imporoved code. (Notice the changes in the html div order and the CSS).

/* This isn't in my production code, this is just a quick and dirty reset for on JSFiddle */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
main {
  display: table;
  border-bottom: 1px solid red;
  background: #FFFFFF;
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
}
#left,
#center,
#right {
  padding: 1rem;
  display: table-cell;
}
#left {
  width: 192px;
}
#right {
  width: 288px;
}
#center {
  border-left: 1px solid red;
  border-right: 1px solid red;
  overflow: hidden;
}
#left .menu {
  list-style: none;
}
.clearfix {
  clear: both;
}
}

<main>
  <nav id="left">
    <ul class="menu">
      <li>Alpha</li>
      <li>Beta</li>
      <li>Gamma</li>
      <li>Delta</li>
    </ul>
  </nav>

  <section id="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>

  <aside id="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </aside>
</main>