Lately, I've been working on a website and trying to create a border that surrounds all my content and extends the full length of the page. The #Container div is supposed to expand to fill the entire page. I've tried using min-height:100%; in my CSS, but for some reason, it's not extending the border all the way down the page. You can check out my website here. It's a basic HTML setup on the homepage.
<div id="Container">
<div id="header">
<div id="menu">
<ul id="navbar">
<li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li>
<li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li>
<li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li>
<li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li>
<li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li>
<li><a id="nav6" class="nav-text" href="#">Info</a></li>
<li><a id="nav7" class="nav-text" href="#">About</a></li>
<li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li>
</ul>
</div>
</div>
<div id="content">
<h3>Home Page</h3>
</div>
<div id="footer">
<div id="footertext">Copyright © UsedAtCollege.com</div>
</div>
</div>
My CSS code is pretty simple as well. I have a CSS reset but removing it didn't solve the issue.
* {
margin: 0;
padding: 0;
}
#Container {
width:980px;
min-height:100%;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border-style:solid;
border-width:1px;
border-color:rgb(154,154,154);
}
I'm puzzled why the min-height property isn't causing the border to extend all the way to the bottom of the screen. Any insights or solutions would be appreciated!