Codemonkeyforums.com :: Get and Give help in C, C++, C#, ASP, .NET, PHP, Perl, Python, Javascript, AJAX, XML and more

hinch · **Joined:** Tue Sep 09, 2008 5:29 pm **Posts:** 52

I'm trying to make a new layout for a little project and I'm having a few issues getting the thing to stretch to full height. Can someone point me in the right direction please.

What I'm trying to achieve is that the header and footer sections are fixed height (got this bit working) but then the bit containing
<div id="maincol" > Main Content Column </div>
<div id="leftcol" > Left Column </div>

stretch to full height taking up all remaining visible height space so basically the site fills the browser.

HTML

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" lang="en" >
<head>
<title>DYNAMIC TITLE TO GO HERE</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Notepad" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>

<div id="pagewidth" >
   <div id="header" >
   <a href="dashboard.php"><img src="images/logo.jpg" border="0" /></a>

   <div id="topright-tab">Welcome  <br />September 9, 2008, 1:54 pm <br /> <a href="logout.php">Logout</a></div>
   <br />
   <div id="mainmenu">
      <ul>
      <li><a href="#" title="Link1" onmouseover="document.getElementById('menuhints').innerHTML ='stuff';" onmouseout="document.getElementById('menuhints').innerHTML ='';"><span>Link1</span></a></li>
      <li><a href="#" title="Link2" onmouseover="document.getElementById('menuhints').innerHTML ='stuff';" onmouseout="document.getElementById('menuhints').innerHTML ='';"><span>Link2</span></a></li>

      <li><a href="#" title="Link3" onmouseover="document.getElementById('menuhints').innerHTML ='stuff';" onmouseout="document.getElementById('menuhints').innerHTML ='';"><span>Link3</span></a></li>
      <li><a href="#" title="Link4" onmouseover="document.getElementById('menuhints').innerHTML ='stuff';" onmouseout="document.getElementById('menuhints').innerHTML ='';"><span>Link4</span></a></li>
      <li><a href="#" title="Link5" onmouseover="document.getElementById('menuhints').innerHTML ='stuff';" onmouseout="document.getElementById('menuhints').innerHTML ='';"><span>Link5</span></a></li>
      <li><a href="#" title="Link6" onmouseover="document.getElementById('menuhints').innerHTML ='stuff';" onmouseout="document.getElementById('menuhints').innerHTML ='';"><span>Link6</span></a></li>
      </ul>
   </div>
   <div id="menuhints"></div>

   </div>         
         <div id="wrapper" class="clearfix" > 
            <div id="maincol" > Main Content Column </div>
            <div id="leftcol" > Left Column </div>
            
         </div>
         
         

   <div id="footer" >
         footer
   </div>

</div>
</body>
</html>      

CSS at current

Code:

html, body{ 
 margin:0; 
 padding:0; 
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 /* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
 } 
 #topright-tab {
   position:absolute;
   width:268px;
   height:34px;
   padding: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 75%;
   position: absolute;
   top: 5px;
   right: 5px;
   text-align:right;
   }
#pagewidth{ 
 max-width:100%;  

 min-width:50%;  
}
 
#header{
 position:relative; 
 height:110px; 
  background-color:#ffffff; 
 width:100%;
} 
 
#leftcol{
 width:10%; 
 float:left; 
 position:relative; 
 background-color:#73564F; 
  min-height:100%;
/* \*/
  height:100%;
 }
 
#maincol{background-color: #DFA06F;  
 float: right; 
 display:inline; 
 position: relative; 
 width:90%; 
  min-height:100%;
/* \*/
  height:100%;
 }
 #wrapper{
  min-height:100%;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
#footer{
 height:50px; 
 background-color:#cbdae6; 
 clear:both;
 text-align: center;
 width:100%;
 font-size:93%;
 line-height:normal;
 border-top:1px solid #666;
 } 
 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
* html .clear{height:auto;margin-bottom:0}
.clearfix{display: block;}
/* End hide from IE-mac */  
 #menuhints {
     margin:0;
     padding:0px 10px 0 10px;
     list-style:none;
      }
#mainmenu {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
     border-bottom:1px solid #666;
      }
    #mainmenu ul {
     margin:0;
     padding:0px 10px 0 10px;
     list-style:none;
      }
    #mainmenu li {
      display:inline;
      margin:0;
      padding:0;
      }
    #mainmenu a {
      float:left;
      background:url("../images/tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #mainmenu a span {
      float:left;
      display:block;
      background:url("../images/tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #mainmenu a span {float:none;}
    /* End IE5-Mac hack */
    #mainmenu a:hover span {
      color:#FFF;
      }
    #mainmenu a:hover {
      background-position:0% -42px;
      }
    #mainmenu a:hover span {
      background-position:100% -42px;
      }
 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

attached is what it looks like at the moment so you can hopefully see the bits I need to be full height

SaW · **Posted:** Thu Sep 11, 2008 3:54 pm

I never tried this mate but try this http://www.xs4all.nl/~peterned/examples/csslayout1.html

I havent really looked at your code, ill take a look after work.

hinch · **Joined:** Tue Sep 09, 2008 5:29 pm **Posts:** 52

yeah I can do full height but fixed width but I need fluid/full width too for what I'm doing

Starko · **Posted:** Thu Sep 11, 2008 6:58 pm

if i remember right, it's impossible to stretch in CSS, assuming frames work the same way as images, especially if

Code:

height:100%;

didn't work.

SaW · **Posted:** Thu Sep 11, 2008 8:13 pm

There you go, should work if not give me a msn.

Code:

html,body {
   margin:0;
   padding:0;
   height:100%; /* needed for container min-height */
   background:#fff;   
   font-family:arial,sans-serif;
   font-size:small;
   color:#666;
}

div#pagewidth {
   position:relative; /* needed for footer positioning*/
   margin:0 auto; /* center, not in IE5 */
   width:100%;
   background:#fff;
   
   height:auto !important; /* real browsers */
   height:100%; /* IE6: treaded as min-height*/

   min-height:100%; /* real browsers */
}


#topright-tab {
   position:absolute;
   width:268px;
   height:34px;
   padding: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 75%;
   position: absolute;
   top: 5px;
   right: 5px;
   text-align:right;
   }

#header{
position:relative;
height:110px;
  background-color:#ffffff;
width:100%;
}

#leftcol{
   position:absolute;
   width:10%;
   left:0; /* stick to bottom */
   background:#73564F;
    float:left;

   height:auto !important; /* real browsers */
   height:100%; /* IE6: treaded as min-height*/

   min-height:100%; /* real browsers */
}

#maincol{
/* \*/
   position:absolute;
   width:90%;
   right:0; /* stick to bottom */
    float:right;
   background-color:#DFA06F;

   height:auto !important; /* real browsers */
   height:100%; /* IE6: treaded as min-height*/

   min-height:100%; /* real browsers */
}

div#wrapper{
   position:absolute;
   width:100%;
   left:0; /* stick to bottom */
   background:#000;
   
   height:auto !important; /* real browsers */
   height:100%; /* IE6: treaded as min-height*/

   min-height:85%; /* real browsers */

}


div#footer {
   font-size:93%;
   text-align: center;
   clear:both;
   height:50px;
   position:absolute;
   width:100%;
   bottom:0; /* stick to bottom */
   background:#cbdae6;
   border-top:1px solid #666;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
* html .clear{height:auto;margin-bottom:0}
.clearfix{display: block;}
/* End hide from IE-mac */ 
#menuhints {
     margin:0;
     padding:0px 10px 0 10px;
     list-style:none;
      }
#mainmenu {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
     border-bottom:1px solid #666;
      }
    #mainmenu ul {
     margin:0;
     padding:0px 10px 0 10px;
     list-style:none;
      }
    #mainmenu li {
      display:inline;
      margin:0;
      padding:0;
      }
    #mainmenu a {
      float:left;
      background:url("../images/tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #mainmenu a span {
      float:left;
      display:block;
      background:url("../images/tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #mainmenu a span {float:none;}
    /* End IE5-Mac hack */
    #mainmenu a:hover span {
      color:#FFF;
      }
    #mainmenu a:hover {
      background-position:0% -42px;
      }
    #mainmenu a:hover span {
      background-position:100% -42px;
      }

/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

p.s it works temp until you open up IE

ill take another look.