On 2006-12-15,
ia***@aol.com <ia***@aol.comwrote:
Thats correct, I would like the navigation div to be the same height as
the content div (whatever that will be from page to page)
The content DIV has no height determined
See below for a suggestion using positioning.
The way this works is that we have a relatively positioned container for
#localnav and #content.
That container's (auto) height is determined by its normal-flow
descendents, i.e. by #content, since #localnav is absolutely positioned
and therefore not in the normal flow.
But because the container is relatively positioned, it is the containing
block for #localnav. When we give #localnav values for the properties
top, left and bottom, they refer to the containing block, i.e. we are
making #localnav 0px from the top, left and bottom of that containing
block.
So, the containing block's height depends on #content, and #localnav is
wedged into that containing block, 0px from the top and 0px from the
bottom of it, whatever the container's computed height turns out to be.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#localnav
{
width: 154px;
position: absolute;
border: 1px solid red;
left: 0;
top: 0;
bottom: 0;
}
#content
{
margin-left: 156px;
border: 1px solid green;
}
</style>
</head>
<body>
<div style="position: relative">
<div id="localnav">
links and things links and things links and things links and
things
</div>
<div id="content">
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
content and stuff content and stuff content and stuff
</div>
</div>
</body>
</html>
