Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
<!--
html {
height:100%;
}
body {
background:#cccccc;
background-image: url("images/white_grad_bg.gif");
background-repeat: repeat-x;
background-position:top;
margin:0;
height:100%;
}
.page_container {
position: absolute;
left: 50%;
top: 0px;
width:950px;
margin-left: -475px;
margin-right: auto;
text-align: center;
background:#820024;
background-image: url("images/background.gif");
background-repeat: repeat-x;
background-position:top;
}
.header_left {
float:left;
top:0px;
left:0px;
width:183px;
height:170px;
margin: 0;
border: 0;
padding: 0;
}
.header_middle {
position: relative;
top:0px;
left:auto;
height:170px;
text-align:center;
margin: 0 auto 0 auto;
border: 0;
padding: 0;
}
.navbar {
text-align:center;
padding: 2px 0 3px 0;
text-decoration:none;
}
.navbar_txt {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:#f4f4df;
}
.navbar_txt:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:#ecbd74;
}
.middle_section {
background:#ffffff;
top: 0px;
text-align:left;
margin: 5px auto 0px auto;
border-top: 2px solid #3b3535;
border-bottom: 2px solid #3b3535;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0px 10px 0px 0px;
height:100%;
}
.secnav {
top: 0px;
float: left;
width: 160px;
margin: 0 5px 0 0px;
border: 1px solid #3b3535;
padding: 0px 0px 0px 0px;
background-color: #ecbd74;
height:100%;
min-height:100%;
}
.secnavitem {
margin: 2px auto 2px auto;
width: 150px;
height: 20px;
display: block;
text-align: center;
border: 1px solid #000099;
background: #ecbd74;
padding: 1px 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
color: #3b3535;
}
.secnavitem:hover {
background-color: #f4f4df;
}
.secnavheader {
text-align:center;
font-size:14px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
padding-bottom:5px;
}
.bottom_nav {
clear: both;
padding: 5px 5px 5px 5px;
margin: 0px auto 0px auto;
color: #ecbd74;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background:#820024;
}
.footer {
width: 90%;
clear: both;
margin: 10px auto 10px auto;
border: 1px solid #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color:#FFFFFF;
text-align: left;
padding: 5px 5px 5px 5px;
background:#820024;
}
-->
</style>
</head>
<body>
<div class="page_container">
<div class="header_left"><a href="default.htm"><img src="header_left.gif" border="0" width="183" height="170"></a></div>
<div class="header_middle"><a href="default.htm"><img src="header_right.gif" border="0" width="617" height="143"></a>
<div class="navbar">Top nav bar goes here
</div>
</div>
<div class="middle_section">
<div class="secnav">
<div class="secnavheader">Menu</div>
<div class="secnavitem">Item 1</div>
<div class="secnavitem">Item 2</div>
<div class="secnavitem">Item 3</div>
<div class="secnavitem">Item 4</div>
<div class="secnavitem">Item 5</div>
<div class="secnavitem">Item 6</div>
<div class="secnavitem">Item 7</div>
<div class="secnavitem">Item 8</div>
<div class="secnavitem">Item 9</div>
<div class="secnavitem">Item 10</div>
<div class="secnavitem">Item 11</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras a neque vitae tellus vehicula tempus. Nullam vestibulum tortor elementum metus. Integer massa nulla, mollis at, tristique a, vehicula posuere, justo. Ut luctus. Donec consequat. Sed vel turpis. Nulla et arcu quis orci sagittis egestas. Aenean sagittis. Duis vel orci. In hac habitasse platea dictumst. Donec ante ante, sollicitudin a, tristique at, sodales non, ligula. Pellentesque justo. Suspendisse euismod, elit eu tempus interdum, risus enim iaculis felis, nec mattis orci orci pharetra ipsum. Ut luctus, felis eget fringilla ornare, turpis metus cursus libero, rutrum pulvinar neque elit nec magna. Morbi viverra, quam eget tristique fringilla, elit tellus bibendum sapien, vitae volutpat ligula erat et lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt. Nullam fermentum tincidunt massa. Donec porta mauris eu arcu.</p>
<p>Vestibulum odio sapien, convallis vitae, adipiscing eget, venenatis lobortis, neque. Suspendisse pellentesque nulla non eros. Etiam ut risus. Quisque eget tortor ultrices est vestibulum condimentum. Curabitur feugiat, massa in elementum porta, odio sem feugiat libero, sit amet malesuada velit nisi a libero. Vivamus congue lobortis lectus. Mauris lorem erat, porta ac, condimentum et, pretium quis, magna. Nulla lobortis tincidunt sapien. Proin placerat erat nec orci. Aliquam mauris eros, venenatis sed, tristique in, commodo eu, nunc. Pellentesque mattis est a libero. Etiam ut erat et mauris porta commodo. Nam pulvinar aliquam ante. Ut ante diam, facilisis eget, varius quis, tempus vel, odio. Pellentesque at felis.</p>
<p>Fusce urna libero, ornare id, tincidunt quis, vestibulum imperdiet, quam. Sed nec lorem at risus iaculis blandit. Donec gravida urna non mauris. Donec lobortis. Curabitur ultricies pharetra leo. Donec ante pede, ultrices non, pulvinar eu, pellentesque sed, risus. Nunc diam magna, sodales nec, fringilla varius, dapibus in, est. Nulla commodo pharetra ipsum. Aliquam imperdiet, tortor quis placerat ornare, lorem nibh facilisis dui, ut tempus tortor velit in purus. Nulla accumsan. Integer risus dolor, ultricies ut, commodo vel, aliquet eget, enim. Ut facilisis augue sed nunc gravida ultrices. Proin lorem sapien, lobortis et, venenatis at, rutrum eget, risus. Integer consequat nisi in est. Nulla est est, elementum quis, posuere vitae, tristique nec, nunc.</p>
<p>Nunc erat. Curabitur eget tellus. Aliquam sit amet est vitae odio volutpat accumsan. Donec facilisis, orci a tincidunt fringilla, libero elit tempus sem, eu eleifend lectus risus a odio. Maecenas ac sapien. Nullam risus metus, ultrices non, mollis eget, lobortis sit amet, augue. Nullam metus erat, bibendum vel, tempor at, tincidunt at, enim. Praesent consectetuer facilisis risus. Phasellus rutrum enim vel nisl. Quisque semper nulla non elit. Nam vel purus ac mi scelerisque porttitor. Cras purus elit, convallis in, imperdiet et, vestibulum eu, diam. Aliquam erat volutpat. Donec vitae lorem. Nulla non mauris non odio tempor laoreet. Maecenas sodales pretium nibh. Sed venenatis. Nullam lectus erat, porttitor nec, ultrices quis, pulvinar ac, purus.</p>
<p>Proin pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce feugiat rhoncus dui. Fusce semper sagittis justo. Suspendisse bibendum massa ut nisl. Phasellus ultricies dolor eu nisi. Vestibulum semper sapien. Cras quis pede. Morbi id elit vitae mi porttitor egestas. Mauris eget magna. Donec sagittis sagittis diam. Mauris tristique faucibus dolor. Etiam malesuada urna. Nullam fringilla, massa non consectetuer mattis, nunc tellus euismod massa, quis fringilla purus erat nec tortor. Aenean id nunc eu enim aliquam congue. Vivamus mauris nisi, dictum id, vestibulum ut, dapibus non, purus.</p>
</div>
<div class="footer">
<div class="bottom_nav">Bottom navigation goes here</div>
<p>Footer text goes here</p>
</div>
</div>
</div>
</body>
</html>
get a menu div to extend to 100% height of of the container in which the menu resides.
This will work provided the contents of div.middle_section don't get too tall.
Some extra thoughts:
# The code posted has an extra </div> - remove the one immediately before the </body>.
# You can reduce your css by reducing the redundancies - for eg remove top/left from elements with no position.
# This fix will cause problems if middle_section gets too long, and the lay out can be easily achieved without using absolute positioning and the negative margins - which themselves already create problems such as chopping off the left nav and the footer overlapping the content. Have you considered avoiding all that by just centering .page_container and allowing the elements to flow naturally instead?
