left div + right div + center div = 100% width. How to realise?

Question

I have three divs and one main div:

<div id="container" style="width:100%;">
    <div id="left" style="width:201px; float:left;">
     .... 
    </div>
    <div id="centre" style="float:left;">
     ....   
    </div>
    <div id="right" style="width:135px; float:right;">
     ....
    </div>
</div>

How it is possible to make centre div max width, so that containerDivWidth = leftDivWidth+ rightDivwidth + centreDivWidth;

Solution 1

I believe that what you are trying to achieve is the "Holy Grail" layout.

There is a great List Apart article about this Layout, you should check it:

http://www.alistapart.com/articles/holygrail

Solution 2

This will allow for you to have fixed right and left columns and a flexible center portion:

CSS

<style type="text/css">
  #left {
    float: left;
    width: 201px;
    border: 1px solid red;
  }

  #centre {
    display: block;
    overflow: auto;
    border: 1px solid green;
  }

  #right {
    float: right;
    width: 135px;
    border: 1px solid blue;
  }
</style>

HTML

<div id="container" style="width:100%;"> 
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="centre">Middle</div>
</div> 

Comments

[andrii]

Really right and left div's are not fixed(I've set their width just for example). They contain some content that set their width automatically. But the problem that the centre div should get all available surface between left and right.

[Matt Mitchell]

This seems on track, but I can't see a way to get the right bit to "float" back up to be inline, as the width of the middle bit is too wide.

[DHuntrods]

If you remove the float from the centre div, and set it to display:inline it should slot in between the two outside divs.

[Dinesh Dabhi]

Nice Simple and fast to apply