Sorry for a second thread, but I figured this is a nice cleaner way to express my thoughts. For some reason, CSS is massively flawed at making 100% Height. Looking at my code, I can't for the life of me figure out why I can't get 100% Height to work. Is there anyone here who can help me? For some reason, the <div id="content"> container will not grow the entire site. Take a look at what I mean here: http://tueproductions.com/?page=bio&name=sam Totally wtf? Here is the code I'm using: CSS @charset "utf-8"; body { font-family: Trebuchet MS, Tamoha, sans-serif; font-size: small; color: #1c1f18; text-align: center; background-color: #2F0F09; margin: 0; height: 100%; min-height: 100%; } a, a:link, a:visited, a:active { color: #19254f; text-decoration:none; } a:hover { text-decoration:underline; } img { border: 0px; } /*h1 { color: #7f2918; font-family: Tamoha, sans-serif; font-size: x-large; padding-bottom: 0; margin-bottom: 0; margin-top: 0; margin-left: 0.2em; } h2 { color: #7f2918; font-family: Tamoha, sans-serif; margin-left: 1em; font-size: medium; margin-bottom: .5em; padding-bottom: 0; } p { margin:0.5em 0 1em 1.2em; } p.bio { margin:0.1em 1em 1.3em 2em; } /* Start Div Properties */ #wrapper { float: inherit; border: 1px #000 solid; border-bottom: 0; border-top: 0; background-color: #ccd3bb; text-align: left; width: 800px; margin-top: 0; margin-left: auto; margin-right: auto; margin-bottom: -40px; height:auto !important; /* real browsers */ min-height: 100%; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ } #header { float: left; background-image: url(../images/header.png); position: relative; height: 203px; width: 800px; } #navbar { float: left; position: relative; top: 165px; left: 150px; } #content { float: left; position: relative; width: 770px; margin-right: 15px; margin-left: 15px; } #footer { height: 40px; border: 1px #000 solid; border-bottom: 0; border-top: 0; background-color: #ccd3bb; text-align: right; width: 800px; margin-left: auto; margin-right: auto; padding-bottom: 0; } p.foot { padding: 0; padding-right: 1em; margin: 0; } Code (markup): and XHTML: <!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>The Unveiled Eye Productions</title> <link href="lib/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="lib/slide/slider.css" /> <script type="text/javascript" src="lib/slide/slider.js"></script> <script type="text/javascript"> function bookmark_us(url, title){ if (window.sidebar) // firefox window.sidebar.addPanel(title, url, ""); else if(window.opera && window.print){ // opera var elem = document.createElement('a'); elem.setAttribute('href',url); elem.setAttribute('title',title); elem.setAttribute('rel','sidebar'); elem.click(); } else if(document.all)// ie window.external.AddFavorite(url, title); } </script> </head> <body> <div id="wrapper"> <div id="header"> <div id="navbar"> <a href="?page=about"><img src="images/links/about_us.png" /></a> <a href="?page=goals"><img src="images/links/goals.png" /></a> <a href="?page=bio"><img src="images/links/bio.png" /></a> <a href="?page=media"><img src="images/links/media.png" /></a> <a href="?page=news"><img src="images/links/news.png" /></a> <a href="?page=donate"><img src="images/links/donate.png" /></a> </div> </div> <span id="content"> <?php $page = $_GET["page"]; if(!file_exists('content/'.$page.'.php') || $page == null) include("content/main.php"); else include("content/".$page.".php"); ?> </span> <br /><br /><br /> </div> <div id="footer"> <p class="foot"> <?php include("content/copyright.php"); ?> </p> </div> </body> </html> Code (markup): Why is it doing what it's not supposed to? In Firefox, the wrapper container should be 100% height. Why doesn't it grow the full height? And in IE, why does it mess up the alignment of the wrapper and footer????? Please help, ASAP.
Of course it doesn't. It's as tall as it needs to be. Go back to the specs, in particular §9, Visual formatting model, and §10, Visual formatting model details. You're trying to apply print design to the web, and the web is not print. The content doesn't have to be full height, it just needs to appear to be. How would you define the height? A web page is not a fixed size piece of paper stock. cheers, gary
Remove the "height:100%" from your body tag and insert the following at the top: html, body { height: 100%; } Code (markup): Depending on how your interface was coded, this may or may not resolve the issue. I'd have to see a live page to work on it. [EDIT] Oh, just saw the link. Checking it out now. [EDIT2] Looked fine in Firefox 3 and IE 6. Was this resolved?