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;

Answer 1

You cannot mix relative and fixed width which is in my opinion a shortcoming in CSS.

The best you can do is something like:

<div id="container" style="width:100%;"> 
    <div id="left" style="width:20%; float:left;"> 
     ....  
    </div> 
    <div id="centre" style="width:65%; float:left;"> 
     ....    
    </div> 
    <div id="right" style="width:15%; float:right;"> 
     .... 
    </div> 
</div> 

I'll be very happy if I'm wrong.

Answer 2

What I've previously done, is to set centre to have a left margin of 201px, and a right margin of 135px. Set it to relative positioning (instead of floating it), and then it should fill the entire remaining space in between the left and right columns.

I can't seem to find one of my old code examples, so this is the best I can do at the moment. Hope it helps!

Answer 3

with a little javascript, its perfect/ add jquery first for selectors & etc.

<script type="text/javascript" src="js/jquery.js"></script>

and the javascript part/

$(document).ready(function(){
    $('#centre').css("width",$(window).width()-336)

    $(window).resize(function() {
        $('#centre').css("width",$(window).width()-336)
    });
});

Answer 4

This might help: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

Answer 5

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

Answer 6

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>