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 id="wrapper" style="width:100%; height:(100% - 100px)">
           <div id="left" style="width:250px; height:(100% - 100px)">

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

Please help.

1 answer

o.k.w 2355
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.


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


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