I am designing a webpage with a fluid layout. I want to keep a 100% width and a 100% height. The problem is i dont know how to keep divs "left" and "right" with a 100% height inside their parent div, "wrapper".

<div id="container" style="width:100%; height:100%">  
     <div id="header" style="width:100%; height:100px">
     </div>

     <div id="wrapper" style="width:100%; height:(100% - 100px)">
           <div id="left" style="width:250px; height:(100% - 100px)">
           </div>

           <div id="right" style="width:(100% - 250px); height:(100% - 100px)">
           </div>           
     </div>          
</div>

Please help.

1 answer

o.k.w 2355
1
point
This was chosen as the best answer

This is one way of doing it. By specifying the height of the 'wrapper div' to 'auto' and not '100%', use 'absolute position' to place the 'top' at the lower edge of the 'header' and set 'bottom' to zero.

Take a look at the following and you should be able to figure out. Tested on FF3.6, IE8, Webkit browsers. I doubt it'll work on IE6/7, might need to use IE conditional comments to tweak.

CSS:

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML:

<body>
<div id="container" style="width:100%; height:100%; position: absolute;">  
  <div id="header" style="width:100%; height:100px;">
header
  </div>
  <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;">
    <div id="left" style="width:250px; height:100%; float:left;">
    left
    </div>
    <div id="right" style="width: 250px; height:100%; float:right; ">
    right
    </div>           
    main content
  </div>          
</div>
</body>
Answered almost 7 years ago by o.k.w