Left div + right div + center div = 100% width. How to implement?

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 can I make the maximum width of the center div, so containerDivWidth = leftDivWidth + rightDivwidth + centreDivWidth;

Answer 1

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

This layout has a great List Apart article, you should check it out:

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

Answer 2

This will allow you to have fixed right and left columns and a flexible central part:

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> 

Answer 3

What I previously did was set the centre to the left edge of 201px and the right edge of 135px. Set it to relative positioning (instead of swimming), and then it should fill in all the remaining space between the left and right columns.

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

Answer 4

This may help: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm alt text http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels-dimensions .gif

Answer 5

You cannot mix relative and fixed widths, which in my opinion is a drawback 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 will be very happy if I am wrong.

Answer 6

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

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

and part of javascript /

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