AusQB
New Member
I have a fairly basic layout with a left hand side bar for navigation. I've set the height of the side bar to 100% (of the body div) yet it reduces the height to fit the containing div. Within the leftnav div is another div which contains the list.
In other words, I want div#leftnav to fit the height of div#body.
It seems like such a trivial problem but I can't figure it out.
Here is the code, omitting most of the content and irrelevant attributes:
EDIT: Ok, I realized that setting the height to 100% will not work if the parent element's height is set to auto. Is there a way around this if I don't want a fixed height for the body div?
In other words, I want div#leftnav to fit the height of div#body.
It seems like such a trivial problem but I can't figure it out.
Here is the code, omitting most of the content and irrelevant attributes:
Code:
div#wrap {
height: auto;
margin: 10px auto;
width: 900px;
}
div#header {
height: 120px;
width: 100%;
}
div#body {
height: auto;
margin-top: 10px;
width: 100%;
}
div#leftnav {
float: left;
height: 100%;
width: 148px;
}
div#content {
float: left;
height: auto;
min-height: 600px;
width: 750px;
}
div#footer {
float: left;
height: 60px;
margin-bottom: 10px;
margin-top: 10px;
width: 100%
}
HTML:
<body>
<div id="wrap">
<div id="header"></div>
<div id="body">
<div id="leftnav"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
</body>
EDIT: Ok, I realized that setting the height to 100% will not work if the parent element's height is set to auto. Is there a way around this if I don't want a fixed height for the body div?
Last edited: