CSS Forum

**ohsiya** · 08-06-2008, 04:08 PM

Hi all,

I'm trying to create layout with CSS where there are 3 DIVs. The content need to have the height of all available space.

#Header
{
height: 50px;
width: 100%
}

#Content
{
margin: 0px 5px 0px 5px;
padding: 5px;
border: solid 1px blue;
height: (all available height);
overflow: auto;
}

#Footer
{
height: 50px;
width: 100%;
}

Please help. I've stucked with this for so many days already. Thank.

**wayfarer07** · 08-06-2008, 04:28 PM

The easiest way to do this is with Faux Columns.

**LadynRed** · 08-06-2008, 04:37 PM

Agreed. It's the easiest to implement and still keep the hair on your head

**ohsiya** · 08-06-2008, 05:38 PM

I've researched faux column but I don't think I can use the method. This is what I am trying to achieve.

The layout will look just like that no matter what is the window size. By the way, this is only for IE.

**LadynRed** · 08-06-2008, 10:00 PM

If all you're looking to do is make that blue box/frame around the white section, then you don't need columns - you just need a wide border on the div.

**ohsiya** · 08-07-2008, 10:04 AM

Quote:

Originally Posted by LadynRed

If all you're looking to do is make that blue box/frame around the white section, then you don't need columns - you just need a wide border on the div.

I don't have any column. Just 3 DIVs. I would like to know how to set the content DIV height (content height = 100% height - header height - footer height).

If I don't set the content height the output will be like the following screen shot.

Please help. Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HEADER</title>
<style type="text/css">
html, body {
 height:100%;
 width: 100%;
 padding: 0px;
 margin: 0px;
 overflow:hidden;
}
</style>
</head>
<body>
<div style="background:#99CCFF;height:25px;width:100%;text-align:center;vertical-align:middle">HEADER</div>
<div style="background:#99CCFF;width:100%;height:93%;">
<div style="background:white;border:solid 3px blue;overflow: auto; margin-left:10px; margin-right:10px;">
 CONTENT CONTENT CONTENT<br />
 CONTENT CONTENT CONTENT<br />
 CONTENT CONTENT CONTENT<br />
 CONTENT CONTENT CONTENT<br />
 CONTENT CONTENT CONTENT<br />
 CONTENT CONTENT CONTENT</div>
 
</div>
<div style="background:#99CCFF;height:25px;width:100%;position:absolute;bottom:0px;text-align:center;vertical-align:middle;">FOOTER</div>
</body>
</html>

**wayfarer07** · 08-07-2008, 10:19 AM

Read the stickies: http://www.webmaster-talk.com/css-fo...l-browser.html

**ohsiya** · 08-07-2008, 03:04 PM

Quote:

Originally Posted by wayfarer07

Read the stickies: http://www.webmaster-talk.com/css-fo...l-browser.html

I've tried this method but can't box the content just like my first sample image. Thanks.

**LadynRed** · 08-07-2008, 03:06 PM

Then lets see ALL the code so we can see what's going on. There should be no problem with that method to get the results you want.

**wayfarer07** · 08-07-2008, 06:10 PM

If all else fails, I'll show you a way you can do it with JavaScript.

**ohsiya** · 08-11-2008, 12:59 PM

This is what i have for now. The content extends way over the footer. If I set height for content, the footer won't have a fixed height. Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
   * { margin: 0; }
   html, body { background-color: yellow; height: 100%; }
   .wrapper { min-height: 100%; height: 100%; margin: 0 10px -40px 10px; }
   .header { height: 40px;background-color:orange; margin-bottom: -40px; }
   .content { border: solid 1px black; overflow: scroll; margin-top: 40px; background-color:white; }
   .footer { background-color:red; height: 40px; }
   .push { background-color:fuchsia; height: 40px; }
  </style>
 </head>
 <body>
   <div class="header" style="">
    <div style="background-color:blue; width:200px; height:20px; margin: 20px auto auto 10px;">
     <table style="text-align:center; color:white;">
      <tr>
       <td>Link 1</td>
       <td>Link 2</td>
       <td>Link 3</td>
      </tr>
     </table>
    </div>
   </div>
 
  <div class="wrapper">   
   <div class="content">
    <p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p>
    <p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p>
    <p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p>
    <p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p>
    <p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p>
    <p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p>
    <p>CONTENT</p><p>CONTENT</p><p>CONTENT</p>    
   </div>
 
  </div>
   <div class="footer">
   FOOTER
  </div>
 </body>
</html>

**LadynRed** · 08-11-2008, 01:33 PM

The problem is the -40px bottom margin you've got on #wrapper.. get rid of it or adjust it.

**ohsiya** · 08-11-2008, 01:55 PM

Quote:

Originally Posted by LadynRed

The problem is the -40px bottom margin you've got on #wrapper.. get rid of it or adjust it.

This needs to be there because the footer needs to stick to the bottom of the browser, not the bottom of the page. The default browser's scroll bars will be disable later. User will be using the vertical scroll bar in the Content DIV.

Thank you.

**LadynRed** · 08-11-2008, 07:44 PM

The content is extending over the footer BECAUSE of that -40px.
There are other methods to stick the footer at the bottom.