css - 3 column layout with edge columns as wide as their content? -

could please explain how alter my example has:

• 3 columns wide container
• right, left columns wide content therein (ie shall not wrap inline child elements)
• center column take remaining width, wrapping its' content necessary
• all 3 columns maintain equal height (i.e. if middle column grows in height due wrapping of its' content, content should not spill under either right or left columns)
  • container can still wide parent element

fiddle: http://jsfiddle.net/qg98e/ - tried using floats middle column's content expectedly spills over, flowing around right/left columns:

markup above fiddle

html:

<p>other content above</p>  <div id="container">   <div id="left">     <button>foo</button>     <button>bar</button>   </div>    <div id="center">      blah blah blah blah blah blah blah blah     blah blah blah blah blah blah blah blah     blah blah blah blah blah blah blah blah     blah blah blah blah blah blah blah blah     blah blah blah blah blah blah blah blah     blah blah blah blah blah blah blah blah     blah blah blah blah blah blah blah blah    </div>    <div id="right">     <a href="#">curly</a>, <a href="#">moe</a>   </div> </div>  <p>other content below</p> 

css:

#container {     border: 1px solid #808080;     clear: both; }  #left {     float: left; }  #right{     float: right; } 

  #container {     position: relative;     border: 1px solid #808080;     height: 100px;/*define you*/     width: 100%;   } #left {     position: absolute;     width: 20%;     height: inherit;     left: 0; } #center{     position: absolute;     width: 56%;     height: inherit;     left: 20%; } #right{     position: absolute;     width: 20%;     height: inherit;     right: 0; }