CSS Forum

**Charles42** · 04:23 AM

Hi all,

I'm the next person to fall victim to this height dilemma.

I am moving a current CMS that was based in Asp .Net 1.1 to a 3.5 framework.

In doing this i am trying to get as many standards as possible crammed in. One of the first being the a div only design.

I have looked around and tried examples but my problem is that the template i am using is slightly different from most. So every time i get one step closer i some how take one step back in regard to something else.

I was wondering if someone could possibly give some insight to my basic HTML layout below I am testing with. The layout i am looking for is where the LeftNavigation and the Content will stretch to fill the body, but also if the content is more than 1 page both will stretch over the page.

HTML 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 runat="server">
    <title>Div Test</title>
    
    <style type="text/css">
        html
        {
            margin: 0 0 0 0;
            font-family:Arial;
            font-size: 9pt;
            overflow:hidden;
            height:100%;
        }
        
        body
        {
            margin: 0 0 0 0;
            padding: 0;
            font-family:Arial;
            font-size: 9pt;
            overflow:auto;
            background-color:Green;
            height:100%;
        }  
        
        #pnlHeader
        {
            background:#cae4ff; 
            height:73px;
        }
        
        #pnlTopNavigation
        {
            background-color:#A33232; 
            height:20px;
        }
        
        #pnlLeftNavigation
        {
            background-color:#d2d2d5; 
            margin: 0 0 0 0;
            float:left; 
            width: 200px;
            /*min-height: 503px;
            height:100%;*/
        }
        
        #pnlBreadcrumbs
        {
            background-color:#69a1bf; 
            margin-left: 200px;
            height:30px;
        }
        
        #pnlContent
        {            
            background-color:#ceedfa; 
            margin-left: 200px;
            /*min-height:433px;*/     
        }
        
        #pnlFooter
        {
            background-color:#00ffff; 
            height:40px;
            margin-left: 200px;
        }              
    </style>
    
</head>
<body>    
    <div style="border: solid 1px pink; min-height:100%">
        <div id="pnlHeader">Header</div>
        <div id="pnlTopNavigation">Top Navigation</div>    
        <div id="pnlLeftNavigation">Left Navigation</div>  
        <div id="pnlBreadcrumbs">Breadcrumbs</div>
        <div id="pnlContent">Content<br />
            a<br />
            b<br />
            c<br />
            d<br />
            e<br />         
            c<br />
            d<br />
            e<br />
            e<br />
            a<br />
            c<br />
            d<br />
            e<br />
            e<br />
            a<br />
            b<br />
            d<br />
            d<br />
            e<br />
            e<br />
            a<br />
            b<br />
            d<br />
            e<br />         
            c<br />
            d<br />
            e<br />
            e<br />            
            c<br />
            d<br />
            e<br />
            </div>
        <div id="pnlFooter">Footer</div>
    </div>
    
</body>
</html>

**LadynRed** · 11-11-2008, 02:42 PM

Don't kill yourself - try the faux columns method instead:
http://www.alistapart.com/articles/fauxcolumns/

**davie_gravy** · 11-11-2008, 06:44 PM

Yes, use the faux columns method. I tried for hours on end to get it to work otherwise...never succeeded. The faux columns method was the only way I achieved it.

**Charles42** · 11-13-2008, 08:01 AM

Quote:

Originally Posted by LadynRed

Don't kill yourself - try the faux columns method instead:
http://www.alistapart.com/articles/fauxcolumns/

Hi.

I gave this a go before i posted, obviously I rushed it and missed something.

I have tried it again and almost got the desired result. Only thing left is getting the footer aligning to the bottom of the page regardless of container div's height.

Will get it sorted though, thanks for your help! Great forum this!