Forum Moderators: not2easy
This one is driving me nuts... Of course I've spent 50x more time than had I given up and used tables. Please help me stay on the righteous div path.
I need the navigation div (#navbar) on the left to be 100% height. I think my tooling around trying to get that to work is hosing the wrapper div's ability (#container) to stretch vertically to accommodate its contents (#content).
You can see, the green bordered div (#content) and lime bordered div (#contentContents) flow through the red bordered div (#container) which I don't want. On the upside, the #footer div (dashed navy) is properly sticking to the bottom of #content.
My typical clear: both div isn't doing the trick. I also messed around with some overflow action to no avail.
Help please. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>XHTML 1.0 Strict</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
/* STANDARD STYLES */
* {margin: 0; padding: 0;}
html, body {height: 100%;}
h1, h2, h3, p {margin-bottom: 10px;}
/* BODY */
body {background-color: #EFEFEF; color: #666; font-family: arial,verdana,sans-serif;}
/* CONTAINER */
div#container {background-color: #FFFFFF; height: 100%; margin: 0 auto; width: 750px;}
/* HEADER */
div#header {background-color: blue; height: 235px; position: relative;}
div.headerPadding {height: 235px;}
/* NAVBAR */
div#navbar {background-color: yellow; float: left; min-height: 100%; width: 225px;}
div#navbarContents {margin: 0 25px;}
div#navbarContents ul.nav {list-style-type: none;}
div#navbarContents ul.nav li a {color: #60604a; display: block; font-size: 13px; font-weight: bold; height: 40px; line-height: 40px; padding: 0 10px; text-decoration: none; width: 155px;}
div#navbarContents ul.nav li.mouseOver a {background-color: #29368C; color: #fff;}
/* CONTENT */
div#content {float: right; width: 525px;}
div#contentContents {margin: 10px 20px;}
/* FOOTER */
div#footer {position: absolute; bottom: 10px; text-align: center; width: 525px;}
/* DEBUG */
div#container {border: 1px solid red;}
div#header {border: 1px solid maroon;}
div#navbar {border: 1px solid purple; width: 223px;}
div#content {border: 1px solid green; width: 523px;}
div#contentContents {border: 1px solid lime;}
div#footer {border: 1px dashed navy;}
</style>
</head>
<body>
<div id="container">
<!--#########-->
<!-- CONTENT -->
<!--#########-->
<div id="content">
<div class="headerPadding"></div>
<div id="contentContents">
<h1>Heading 1</h1>
<p>Ut sagittis dignissim odio nec venenatis. Mauris et luctus nibh. Vestibulum pharetra, metus et fermentum condimentum, nisl mi molestie metus, non consectetur lectus enim in erat. Suspendisse potenti. Pellentesque accumsan sem non velit placerat congue. Morbi a pellentesque dui. Morbi dignissim, leo ut cursus dapibus, ante orci imperdiet ligula, ac condimentum est turpis non dui. Donec non dolor eu erat ornare dictum quis sit amet ipsum. Nunc rhoncus, est ut auctor ultricies, sem sapien fermentum risus, at scelerisque felis nisi vel est. Phasellus ac dui odio, ac hendrerit lorem. Vestibulum libero est, feugiat nec mollis vitae, auctor vitae metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Sed in dui nibh. Ut egestas sapien vel nisi viverra consequat. Mauris ultricies nulla at turpis faucibus auctor. Morbi ultricies ultricies cursus. Nullam vitae erat enim, at adipiscing justo. Nam at nisl lacus. Quisque mollis luctus dui, in sollicitudin elit lacinia vitae. Duis vel nunc sit amet purus posuere convallis. Proin eu nulla mi, id aliquam ligula. Pellentesque est urna, scelerisque eget facilisis ac, pretium in velit. Duis bibendum risus ut neque fringilla pellentesque. Proin in ipsum nec mi varius vestibulum id a sapien. Morbi ante enim, ornare a rutrum a, accumsan vitae mauris.</p>
<h2>Heading 2</h2>
<p>Ut sagittis dignissim odio nec venenatis. Mauris et luctus nibh. Vestibulum pharetra, metus et fermentum condimentum, nisl mi molestie metus, non consectetur lectus enim in erat. Suspendisse potenti. Pellentesque accumsan sem non velit placerat congue. Morbi a pellentesque dui. Morbi dignissim, leo ut cursus dapibus, ante orci imperdiet ligula, ac condimentum est turpis non dui. Donec non dolor eu erat ornare dictum quis sit amet ipsum. Nunc rhoncus, est ut auctor ultricies, sem sapien fermentum risus, at scelerisque felis nisi vel est. Phasellus ac dui odio, ac hendrerit lorem. Vestibulum libero est, feugiat nec mollis vitae, auctor vitae metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Sed in dui nibh. Ut egestas sapien vel nisi viverra consequat. Mauris ultricies nulla at turpis faucibus auctor. Morbi ultricies ultricies cursus. Nullam vitae erat enim, at adipiscing justo. Nam at nisl lacus. Quisque mollis luctus dui, in sollicitudin elit lacinia vitae. Duis vel nunc sit amet purus posuere convallis. Proin eu nulla mi, id aliquam ligula. Pellentesque est urna, scelerisque eget facilisis ac, pretium in velit. Duis bibendum risus ut neque fringilla pellentesque. Proin in ipsum nec mi varius vestibulum id a sapien. Morbi ante enim, ornare a rutrum a, accumsan vitae mauris.</p>
</div> <!-- #contentContents -->
<div id="footer">footer</div>
</div> <!-- #content -->
<!--########-->
<!-- NAVBAR -->
<!--########-->
<div id="navbar">
<div class="headerPadding"></div>
<div id="navbarContents">
<ul class="nav pages">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div> <!-- #navbarContents -->
</div> <!-- #navbar -->
<!--########-->
<!-- HEADER -->
<!--########-->
<div id="header"></div>
</div> <!-- #container -->
</body>
</html>
[edited by: swa66 at 2:01 pm (utc) on July 9, 2009]
[edit reason] No links, please see ToS and forum charter [/edit]
