css - Three column layout -

beginning layout 2 column column-left fixed , column-right liquid have need add third column of widht fixed. have code:

<did id="#container">   <div id="#col1"> left fixed 15em </div>   <div id="#col2"> center liquid </div>   <div id="#col3"> right fixed 15em </div> </div> 

with css:

#container {   background-color: #ffffff;   height: auto;   overflow: hidden; } #col1 {   float: left;   margin: 1em;   padding: 0.5em;    width: 15em; } #col2 {   float: none;    width: auto;   overflow: hidden;   margin: 1em;   padding: 0.5em;  } #col3 {   float: right;    margin: 1em;   padding: 0.5em;    width: 15em; } 

the result third column located below second column right. how can fix problem? final result should layout 3 column left , right column fixed , central column liquid. thank much.

i use css tables these layouts:

note shouldn't use # in id attribute.

#container {    width: 100%;    display: table;  }  #container>div {    display: table-cell;  }  #col1 {    background: lightblue;    padding: 0.5em;     width: 15em;  }  #col2 {    background: lightyellow;    padding: 0.5em;   }  #col3 {    background: lightgreen;    padding: 0.5em;     width: 15em;  }

<div id="container">    <div id="col1"> left fixed 15em </div>    <div id="col2"> center liquid </div>    <div id="col3"> right fixed 15em </div>  </div>