Forum Moderators: not2easy
I'm using the classic header-nav-content-footer layout using divs + css. I'm sure my problem is well known to all, though I couldn't find the answer during a forum search.
My nav/menu bar (floated left) doesn't dynamically 'stretch' vertically to accommodate changes in height of the content div. It is only rendered tall enough vertically to accommodate a fixed number of nav links. I want my nav bar to always touch the footer div no matter what height the content is.
I'm trying to avoid re-laying out the whole page in a table, but my deadline is looming :-(
Thanks for any help!
Here's the html:
<div class="header"> <!--Header--> </div>
<div class="menu"> <!-- menu items --> <div class="spacer"> </div></div>
<div class="content"> <!-- body content --> <div class="spacer"> </div></div>
<div class="footer"> <!-- footer --> </div>
Here's the css (I omit fonts/colour styles):
.spacer {
clear: both;
}
div.header {
margin-bottom: 0px;
}
div.menu {
width:170px;
float: left;
margin-left: -1px;
padding: 10px;
}
div.content {
float:left;
padding: 10px;
margin-left: 0px;
}
div.footer {
margin-top: -1px;
clear: both;
}
--
bOOyah
<html>
<head>
<title>Nouveau</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">
<!--
div.header {background:green;}
#container {background:orange;}
div.menu {
width:170px;
float: left;
padding: 10px;
background-color:orange;
}
div.content {
position:relative;
padding: 10px;
margin-left: 190px;
background:yellow;
}
div.footer {
clear: both;
background:blue;
}
-->
</style>
</head>
<body>
<div class="header">Header</div>
<div id="container">
<div class="menu">
<ul>
<li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li>
</ul>
</div>
<div class="content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
<div class="footer">footer</div>
</body>
</html>
Thanks oberon.
--
bOOyah
Same two columns -- menu and content, but with a dotted line separating them -- not background color.
The content is dydnamic and sometimes the menu is longer and sometimes the content is longer so I can't just attach the dotted border to the longest column.
Can this be done with CSS-P?
Thanks,
--BobG
but using a vertically repeating background graphic on the body (or container) instead of color and then making your "menu" (left column content) transparent, should create the effect..
Suzy
PS: Where are my manners? ;)
Welcome to WebmasterWorld!
I have been working with CSS-P for a couple weeks now. I have a systems programming background.
A lot about css-p is great but I just don't understand the reason for two glaring ommissions.
1) an attribute to contol whether the containing element of an AP element grows to enclose it. (the equivalent of the spacer / clear=both technique for floats).
2) being able to specify whether the height of an element expands to the size of the containing element (as is the default for width) (ie grouping="inside¦freestanding¦inherit")
There is so much talk on the web about figuring out how to acclompish what would be simple layouts if you could do these two things.
* Is there a reason that these things are left out?
* or is there a way to do them that are not supportted by browsers yet?
* are they slated for a future standard?
--BobG
