CSS 100% Page Height Help Please

**kitersin** · 09-18-2007, 08:28 AM

I am coding a web page. I currently have two problems:
1. The right column and nav menu do not show up in Internet Explorer 7
2. My webpage will not stay at 100% not matter what I do.

I have spent all day on this (searched google etc), attempting to resolve the issue and I am posting here as a last resort to see if someone can see if I have an error in my style sheet. I have removed met-tags to reduce lenghth of code.

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">
	   
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
#rightSideBar { width: 220px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
#rightSideBar { padding-top: 30px; }
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

</head>

<body>
<div id="container"><br />
  <div id="header">
    <h1>Header</h1><br /><br /><br />
    <div id="nav">
      <ul>
        <li id="currentpage"><a href="index.html">home</a> </li>
        <li><a href="services.html">services</a> </li>
        <li><a href="work.html">work</a> </li>
        <li><a href="about.html">about</a> </li>
        <li><a href="contact.php">contact</a></li>
      </ul>
    </div>
  </div><br /><br /><br />
  <div id="rightSideBar">
    <h3>Sidebar1 Content</h3><br />
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
  </div>
  <div id="mainContent">
    <h1> Main Content </h1><br />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p><br /><br />
    <h2>H2 level heading </h2><br />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
	</div>
</div>
<div id="footer">
  &copy; 2007 | All Rights Reserved | Website Hand Coded
  </div>
</body>
</html>

CSS

Code:

/***** global *****/
* { 
    margin: 0px;
    padding: 0px;
} 

html { height: 100%; }

body {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    color: #666;
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 1px;
    background: #FFFFFF;
    text-align: center;
    border-top: 5px solid #06C;
    height: 100%;
	
}


/***** container *****/

#container {
    width: 780px;
    text-align: left;
    margin: 0 auto;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}


/***** header *****/

h1 {
    font-family: "Lucida Fax", Georgia, Times, "Times New Roman", Helvetica, Verdana;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}

h2 {
    font-family: "Lucida Fax", Georgia, Times, "Times New Roman", Helvetica, Verdana;
    color: #333;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
}

h3 {
    font-family: "Lucida Fax", Georgia, Times, "Times New Roman", Helvetica, Verdana;
    color: #333;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
}


/***** navigation *****/

#nav {
    float: right;
    font-size: 12px;
}

#nav li {
    list-style: none;
    display: inline;		
    float: left;
    margin: 0px 0px 0px 20px;
}

#nav li a {
    color:#06C;
    text-decoration: none;
}

#nav li a:hover {
    color: #f60;
    text-decoration: none;
}


/***** main content *****/

#mainContent { 
    margin: 0 250px 0 0;
    padding: 0px 15px 0px 0px;
    border-right: 1px dashed #ccc;
}
	

/***** right sidebar *****/

#rightSideBar {
    float: right;
    width: 200px;
    background: #FFFFFF;
    padding: 50px 10px;
}


/***** footer *****/

#footer {
    font-size: 10px;
    color:#000;
    text-align: center;
    background:#d6eaff repeat-x;
    border-top: 5px solid #06C;
    padding: 10px 0;
}

**boogyman** · 09-18-2007, 12:27 PM

<!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">

the transitional doctype was designed for use almost a decade ago. and XHTML is not supported by IE, thus its pointless to use it. You should be using HTML 4.01 Strict.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

and secondly your page is not loading 100% of both columns because by default the height of any element is the sum of the height of its contents. there are a couple of ways of creating the columns the same length. If you have an image(s) that you would like to use you can see Faux Columns however if you just want the backgrounds to be the same color you can use Balanced Columns

**kitersin** · 09-18-2007, 01:53 PM

I think you have misunderstood what my problem is; previously this page loaded fine in both IE and Firefox before I made changes, and now the page requires me to scroll to view the footer.

I will go back to a previous version and take it from there.

**boogyman** · 09-18-2007, 02:14 PM

#container {
...
min-height: 100%;
}

that is where the excess height is coming from. if you get rid of that line, the footer returns to the just under the container.

**kitersin** · 09-19-2007, 06:55 AM

I am wanting the website to use 100% of the length of the screen regardless of the resolution the viewer is using (so I want that white space - but I don't want the viewer to scroll). Similar to this:

http://agamicreative.com/
http://www.webtoolkit.info/

In terms of the right side bar not showing there was a problem in the CSS with the letter spacing. I noticed when I viewed an older version of the CSS file.

**boogyman** · 09-19-2007, 12:52 PM

both of those sites have enough content to fill the screen of a 1280x1024 resolution but if you would like to fill the entire screen you can make your css file something like

Code:

div#footer {
     position: fixed;
     bottom: 0;
}

where div#footer corresponds to your footer element

Thread: CSS 100% Page Height Help Please

Thread Tools

Search Thread

CSS 100% Page Height Help Please

Bookmarks

Bookmarks

Posting Permissions