469,942 Members | 2,516 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,942 developers. It's quick & easy.

CSS and Container Height Problems

Hi

I have a div which contains my local navigation bar, which has a blue
background and is next to the content div, at the moment however this
blue background colour stops after the unordered list ?

I would like the background colour to fill the entrire length of the
localnav div

How is this achieved with CSS?
#localnav{
float: left;
min-height: 100%;/* set here min height */
height: auto !important;/* overwrite the height */
height: 100%;/* this is also the min height for IE */
width: 154px;
background-color: #193C65;
text-align: center;
font-family: tahoma,verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color:#FFFFFF;

}

<div id="localnav">
<p class="navblock">Navigation</p>
<img class="navpics" src="image.gif" alt="picture">

<ul>
<li><a href="">Online</a </li>
<li><a href="">Knowledgebase</a </li>
<li><a href="">News</a </li>
<li><a href="">Training</a</li>
</ul>
</div>

Dec 14 '06 #1
3 4338
On 2006-12-14, ia***@aol.com <ia***@aol.comwrote:
Hi

I have a div which contains my local navigation bar, which has a blue
background and is next to the content div, at the moment however this
blue background colour stops after the unordered list ?

I would like the background colour to fill the entrire length of the
localnav div
The background colour of the localnav div does fill the entire height of
the localnav div, by definition. Do you mean you want the localnav div
to be the same height as the content div?

How is the height of the content div determined?
How is this achieved with CSS?
Generally easier with position: absolute than float I think, because you
can just set the bottom of the div to be "0px" from the bottom of its
container, even when the container's height is auto and depends on its
content. But post a more complete example (i.e. one that includes the
content div as well).
min-height: 100%;/* set here min height */
height: auto !important;/* overwrite the height */
height: 100%;/* this is also the min height for IE */
I don't really understand what all this means-- some kind of IE hack?
Dec 14 '06 #2
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

This is the full code
html,body,wrapper,localnav{
height: 100%;
min-height: 100%
}
body {
margin: 0;
padding: 0;
background-color: #2571B1;
color: white;
background: #2571B1 url(intranetbg1.gif) repeat-x;
font: 12px Arial, Helvetica, Verdana, sans-serif;
}

#wrapper{
background-color: #FFFFFF;
border: 1px solid #000000;
width: 780px;
margin: 0 auto;
text-align: left;
height: 100%;
}

#header{
background-color: #193C65;
height: 64px;
border-bottom: 1px solid #DEDEDE;
width: 780px;
overflow: hidden;
background: url(header-m.jpg) repeat-x 0 0;
}
#content{
float: right;
width: 585px;
background-color: #ffffff;
padding: 20px;
}

#localnav{
float: left;
min-height: 100%;/* set here min height */
height: auto !important;/* overwrite the height */
height: 100%;/* this is also the min height for IE */
width: 154px;
background-color: #193C65;
text-align: center;
font-family: tahoma,verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color:#FFFFFF;

}

<body>
<div id="wrapper">

<div id="header">
Content
</div>

<div id="localnav">
Content
</div>

<div id="content">
Content
</div>

</body>

Dec 15 '06 #3
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>
Dec 15 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Ney André de Mello Zunino | last post: by
6 posts views Thread by Florian Brucker | last post: by
7 posts views Thread by Don G | last post: by
1 post views Thread by Miked | last post: by
3 posts views Thread by Jeffrey Walton | last post: by
3 posts views Thread by simplicity | last post: by
1 post views Thread by anish007 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.