3 column layout HTML/CSS

Question

I have the following HTML layout:

<div class="container">    <div class="column-center">Column center</div>    <div class="column-left">Column left</div>    <div class="column-right">Column right</div> </div> 

Any chance to arrange the columns like on the below sample grid without changing HTML using CSS only?

---------------------------------------------------- |              |                   |               | | Column left  |   Column center   | Column right  | |              |                   |               | ---------------------------------------------------- 

Answer 1

Something like this should do it:

.column-left{ float: left; width: 33.333%; } .column-right{ float: right; width: 33.333%; } .column-center{ display: inline-block; width: 33.333%; } 

DEMO

EDIT

To do this with a larger number of columns you could build a very simple grid system. For example, something like this should work for a five column layout:

.column {      float: left;      position: relative;      width: 20%;          /*for demo purposes only */      background: #f2f2f2;      border: 1px solid #e6e6e6;      box-sizing: border-box;  }    .column-offset-1 {      left: 20%;  }  .column-offset-2 {      left: 40%;  }  .column-offset-3 {      left: 60%;  }  .column-offset-4 {      left: 80%;  }    .column-inset-1 {      left: -20%;  }  .column-inset-2 {      left: -40%;  }  .column-inset-3 {      left: -60%;  }  .column-inset-4 {      left: -80%;  }

<div class="container">     <div class="column column-one column-offset-2">Column one</div>     <div class="column column-two column-inset-1">Column two</div>     <div class="column column-three column-offset-1">Column three</div>     <div class="column column-four column-inset-2">Column four</div>     <div class="column column-five">Column five</div>  </div>

Or, if you are lucky enough to be able to support only modern browsers, you can use flexible boxes:

.container {      display: flex;  }    .column {      flex: 1;            /*for demo purposes only */      background: #f2f2f2;      border: 1px solid #e6e6e6;      box-sizing: border-box;  }    .column-one {      order: 3;  }  .column-two {      order: 1;  }  .column-three {      order: 4;  }  .column-four {      order: 2;  }  .column-five {      order: 5;  }

<div class="container">     <div class="column column-one">Column one</div>     <div class="column column-two">Column two</div>     <div class="column column-three">Column three</div>     <div class="column column-four">Column four</div>     <div class="column column-five">Column five</div>  </div>

Answer 2

This is less for @easwee and more for others that might have the same question:

If you do not require support for IE < 10, you can use Flexbox. It's an exciting CSS3 property that unfortunately was implemented in several different versions,; add in vendor prefixes, and getting good cross-browser support suddenly requires quite a few more properties than it should.

With the current, final standard, you would be done with

.container {     display: flex; }  .container div {     flex: 1; }  .column_center {     order: 2; } 

That's it. If you want to support older implementations like iOS 6, Safari < 6, Firefox 19 or IE10, this blossoms into

.container {     display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */     display: -ms-flexbox;      /* TWEENER - IE 10 */     display: -webkit-flex;     /* NEW - Chrome */     display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ }  .container div {     -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */     -moz-box-flex: 1;         /* OLD - Firefox 19- */     -webkit-flex: 1;          /* Chrome */     -ms-flex: 1;              /* IE 10 */     flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */ }  .column_center {     -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */     -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */     -ms-flex-order: 2;              /* TWEENER - IE 10 */     -webkit-order: 2;               /* NEW - Chrome */     order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */ } 

jsFiddle demo

Here is an excellent article about Flexbox cross-browser support: Using Flexbox: Mixing Old And New