100% height for nested DIVs

How to get a DIV to stretch to containing element rather than content?

[BertieB]

Hello all.

I'm wondering how to get a nested DIV to stretch to the height of its parent DIV. At the moment I can only get it to stretch as far as the content inside it, which can look rather silly when the smaller one has colour styling applied to it. I should add that this is for HTML 4.01 Transitional with a valid doctype.

Example:

Container DIV contains two child DIVs: content and navigation. Navigation DIV is set to % width and floated left of content DIV. Background colours of two child DIVs are different, and so the colour for the navigation DIV only goes partway down the container.

Ideally, I'd like to have the colour from the navigation DIV stretch to the bottom of the container DIV, while the container DIV's height is determined by the content (the latter part is fine now).

I'll throw in some code 'cause I'm feeling nice:

CSS:

html, body {margin:0; padding:0}
body {background-color:#EEEEEE;}

.container {left:20%;
top:70px;
width:60%;
position:relative;
border:1px solid #002277;
background-color:#FFFFFF;
padding:0;
margin:0;
[b]overflow:hidden;/* *see note */[/b]
height:auto;
height:50%;}

.nav {background-color:#37ffee;/*ugly colour, I know!*/
 margin:0;
 padding:0;
 float:left;
 width:25%;
 text-align:center;
 min-height:100%;
 height:100%;
 }

Markup:

<div class="container">
 <h1 class="title">
 Some Title
 </h1>

 <div class="nav">
 <h2 class="navhead">Navigation</h2>
 </div>

 <div class="content">
 <p>Content</p>
 </div>
</div>

* I feel this may be the problem, am I mis-using overflow:hidden to get the container to enclose everything and be the proper size?

I feel like the solution is staring me in the face, but I can't for the life of me see it :/

Bonus points: Does the W3C spec prevent the width CSS attribute being applied to <a> tags? I can't stretch them either... (Unless I use display:block)

And yes, I've tried height: 100% :)

[createErrorMsg]

so the colour for the navigation DIV only goes partway down the container

The reason #nav's backrgound goes only as far as its content is because it is floated. For a floated element, height is always calculated based on the content. Because it is removed from the flow, even 100% doesn't take it's calculation from the container, since the out-of-flow float doesn't interact with the parent at all.

The most common technique for resolving this is called "Faux Columns." Search for the article by that name written by a gentleman named Dan Cedarholm. He describes a technique whereby you create an image as wide as the nav and in the same color as the nav's background, then tile it vertically inside the container on the nav bar's side of the screen. Combined with a margin on the other child div, this technique creates the illusion of two equal height columns, since the image shows in the container div when the nav is too short and visually extends it's background to full height.

You'll also need to add a method of float enclosing to the container, or the background won't work. It looks like you've tried the overflow method of float enclosing, but my understanding is that this is somewhat unreliable.

Several other approaches to try include:

1) Float the container.
2) Add a clearing element, usually a <br /> styled with clear:both at the bottom of the container div, just before the #container closing tag.
3) Clearing floats with structural markup. [positioniseverything.net]

Does the W3C spec prevent the width CSS attribute being applied to <a> tags?

Sort of. Anchors default as inline elements, and inline elements cannot be given explicit dimensions (width or height). If you want to control the width of an anchor, you have to set it to display:block (as you discovered).

cEM

[edited by: createErrorMsg at 4:34 pm (utc) on Oct. 16, 2005]

[BertieB]

Thanks for the detailed reply cEM :) Plenty of options to pick from.

I actually read that resource (linked by yourself in another thread) before posting the question, but my implementation wasn't up to scratch. Like I said, "staring me in the face" ;)

I'll read it again and have another go. Thanks again.