Forum Moderators: not2easy
- body {height: 100%}
- html {height:100%}
- #nav {height: 100%} (this is the name of problem DIV)
- Validated the code @ W3C, and there doesn't seem to be any errors.
- Setting min-height: 100%
Nothing seems to work... Here's the code of specific section:
<div id="main">
<div id="nav">
<ul>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
<li><a href="#" title="#">Link</a></li>
</ul>
</div>
<div id="banner">
<p id="date">
javascript here for date
</p>
</div>
<div id="content">
<h1>News Item</h1>
<p>Quisque at leo vitae leo dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
CSS:
#main {
margin: 0 auto;
position: relative;
}
#nav {
width: 244px;
float: left;
height: 100%;
margin: 0px 5px 5px 0px;
padding: 7px 0px 0px 0px;
background: #C93 url("../images/navtopbar.gif") center top repeat-x;
}
#banner {
width: 711px;
height: 85px;
float: left;
margin: 0px 0px 5px 0px;
background: #A53311 url("../images/banner2.gif");
}
#content {
width: 671px;
float: left;
margin: 0px 0px 5px 0px;
padding: 20px 20px 30px 20px;
background: #DDD;
}
Basically, I need the height of "nav" (on the left) and the combined height of "banner" and "content" (stacked on top of each other to the right of nav) to be equal. The way I have it now, banner+content stretches and nav just stays there at the height of its LIs. I have a pic, but there is no upload ability here and we can't link. Can anybody help a guy out? >_<
