CSS Forum

**samo1215** · 11-18-2008, 03:13 PM

I am trying to create a site with 6 pages. Right now I'm working on the master template/style sheet and am having several layout issues.

I want all of the pages to be 950px wide and centered across the page. The same header image and horizontal navigation bar will appear on each page. Below that I want a content area that will be able to expand depending on the amount of content and footer.

The first issue I'm having is that my content area keeps sliding up below my header image so that it is effectivly under the nav bar. The second problem is I want the content area to expand so together with the footer it will fill the whole page vertically even if there isn't enough content to normally make it do this.

Below you will find the code I have so far. Any help would be greatly appreciated.

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">
<!-- Atwahl Website Version 1.0 Beta ---> 
<head>
   
    <title>Atwahl - Home</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link href="style.css" type="text/css" rel="stylesheet" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
</head>

<body>

    <div id="pagecontainer">

        
        <div id="header">
        </div>


        <div id="navcontainer">
            <ul id="nav">
                <li id="home"><a href="index.html" rel="tag">Home</a></li>
                <li id="about"><a href="about.html" rel="tag">About Us</a></li>
                <li id="properties"><a href="properties.html" rel="tag">Properties</a></li>
                <li id="landgroup"><a href="landgroup.html" rel="tag">Land Group</a></li>
                <li id="foundation"><a href="foundation.html" rel="tag">Foundation</a></li>
                <li id="contact"><a href="contact.html" rel="tag">Contact Us</a></li>
            </ul>
        </div>
        

        <div id="content">
        </div>

    

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

        
    </div>

</body>

</html>

CSS

Code:

/*  Company STYLE SHEET  */


/*  GENERAL DCOUMENT SETTINGS  */

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
    margin: 0; 
    padding: 0; 
    outline: none;
}


html
{
min-height: 100%;
}

body
{
min-height: 100%;
background-color: black;
}

.clear
{
    clear: both;
    padding: 0px; 
    margin: 0px;
}


/*  LAYOUT  */


#pagecontainer
{
    width: 950px;
    margin: 0 auto;
    height: 100%;
}




#header
{
    background-color: red;
    background-image: url(images/logo.gif);
    height: 165px;
}


#navcontainer
{
    float: left;
    text-align: center;
}


#content
{
    background-color: green;
    min-height: 400px;
}    


#footer
{
    background-color: yellow;
    height: 60px;
}


/*  NAVIGATION  */

ul#nav li 
{
display: block;
float: left; 
list-style-type: none;
}


            
ul#nav li a 
{
display: block;
outline: none;
width: 158px;
height: 70px;
background: transparent url(images/nav.png) no-repeat 0 0;
text-indent:-9009px;
/*margin: 0 40px 0 0;  */
}
            
ul#nav li a:hover 
{
background-position:0 -70px
}
            
            
ul#nav li#about a 
{
width: 158px;
background-position: -158px 0;
}

ul#nav li#about a:hover 
{
background-position: -158px -70px
}

            
ul#nav li#properties a 
{ 
width: 158px;
background-position: -316px 0;
}

ul#nav li#properties a:hover 
{
background-position: -316px -70px
}

            
ul#nav li#landgroup a 
{
width: 158px;
background-position: -474px 0;
}
                
ul#nav li#landgroup a:hover 
{
background-position: -474px -70px
}

            
ul#nav li#foundation a 
{
width: 158x;
background-position: -632px 0;
}

ul#nav li#foundation a:hover 
{
background-position: -632px -70px
}


ul#nav li#contact a 
{
width: 158px;
background-position: -790px 0;
}

ul#nav li#contact a:hover 
{
background-position: -790px -70px
}

**sandyk3** · 11-18-2008, 03:52 PM

I think you need to clear your float on your nav container.

**samo1215** · 11-18-2008, 04:06 PM

Thank you for bringing that up. I forgot to mention that I tried to use a "clear: both" after my navigation and wound up with what looked like a 20px gap between my content area and my nav bar. I was hoping for something seamless without any gaps and couldn't figure out why that was happening so I took it out of the code for the time being.

**LadynRed** · 11-19-2008, 03:28 PM

You still need to clear your floats, the trick is to clear it in the right place.

Put a clearing element in before the closing </div> in #navcontainer - such as <br class="clear" /> You also have to zero-out the height of the <br> like this:

Quote:

clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;

That will close the gap.

You also have a problem with the height of #content - IE6 does NOT support min-height, so you need a conditional comment to call a separate css file that contains ONLY the 'fixes' needed for IE6 (and 1 for IE7). In that separate css file you give #content a defined height equal to the min-height you have set on #content. IE will 'stretch' regardless of that set height to contain what you put into it.