Is there a better way to accomplish this seemingly simple three-column layout?

Question

<div class="row">
    <div class="column fixed"></div>
    <div class="column flexible"></div>
    <div class="column fixed"></div>
</div>

Where .column.fixed are both of a fixed width and column.flex is the full width between those.

The only way I know is using positioning, but I'm wondering if it can be done using display: table-cell.

Codepen: http://codepen.io/bernk/pen/leCxm

I have, but I can't get the middle cell to fill the available width between the outside columns. — bernk, Apr 27 '14 at 15:49
@IlanBiala I need to support a bunch of mobile browsers and it seems like they all have at least partial support. The partial part is what sketches me out a bit though… Maybe I'll give it a shot and see how it goes. — bernk, Apr 27 '14 at 16:04
If you look at [caniuse](http://caniuse.com/flexbox), partial is mostly just not supporting the unprefixed version. Flexbox is a joy to work with, I would try to use that. It also works much better on mobile; take a look at any article on flexbox and the holy grail layout. — Ilan Biala, Apr 27 '14 at 16:52

SW4 · Answer 1 · 2014-04-27T16:08:06.460

0

As you note, you could use display:table

option 1: display:table

Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>fit content</div>
    <div class='cell'>expand content</div>
    <div class='cell'>fit content</div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
    width:1%;
    border:1px solid black;
    height:10px;
}
.cell:nth-child(2) {
    width:100%;
}

option 2: floats

....or, you can use floats

Demo Fiddle

HTML

<div></div>
<div></div>
<div></div>

CSS

div {

    border:1px solid black;

    height:10px;

}

div:nth-child(1) {

    float:left;

    width:40px;

}

div:nth-child(2) {

    float:right;

    width:40px;

}

div:nth-child(3) {

    overflow:hidden;

}

edited Apr 27 '14 at 16:08

answered Apr 27 '14 at 15:51

SW4

69,876
20
132
137

The outside columns have to be of a *fixed* size. – bernk Apr 27 '14 at 15:56
Your floats example is interesting… What is the purpose of `overflow:hidden` on the center column? And how come adjacent borders collapse…except for the two vertical ones? – bernk Apr 27 '14 at 16:01
@bernk - both methods support this (fixed widths), look at the CSS - the 1% for the table cells can easily be changed. – SW4 Apr 27 '14 at 16:09
@bernk - see http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width – SW4 Apr 27 '14 at 16:10

score 0 · Answer 2 · answered Apr 27 '14 at 15:55

Clean and responsive. Pure CSS. No messing with display property.

<div id="layout">
       <div class='left'></div>
       <div class='right'></div>
       <div class='center'></div>
    </div>

    <style>
    .left {
    width: 20%;
    float:left;
    background: red;
    }
    .right {
    width: 20%;
    float:right;
    background:blue;
    }
    .center {
    margin:0 auto;
    width: 60%;
    background:green;
    }
    </style>

Fiddle: http://jsfiddle.net/N75Rn/

Nils Kaspersson · Answer 3 · 2014-04-27T16:46:32.130

I like to do this kind of layout with position: absolute on the fixed-width elements and a padding value on their parent equal to their width.

It has an advantage in RWD/SEO since the order of the columns doesn't matter. Also, the contents of the flexible element won't leak out below the fixed-width elements when the flexible element is higher than them, which may or may not be desirable depending on your design.

The disadvantage to this is that the fixed-width elements are taken out of the content flow, meaning you may have to, somehow, compensate for their height if they're higher than the flexible element and if that breaks the layout.

Example:

HTML:

<div class="row">
  <div class="column fixed fixed-left"></div>
  <div class="column flexible"></div>
  <div class="column fixed fixed-right"></div>
</div>

CSS:

.row { padding: 0 150px; }

.fixed {
  position: absolute;
  top: 0;
  width: 150px;
}

.fixed-left  { left: 0; }
.fixed-right { right: 0; }

Here's a pen with this.

Is there a better way to accomplish this seemingly simple three-column layout?

3 Answers3

option 1: display:table

Demo Fiddle

option 2: floats

Demo Fiddle