Stupid simple css question

[CaldwellYSR]

I should know this. I'm 99% sure I figured it out at one point and since I've moved on past css I've forgotten it. How do I make a floated div have the height of it's container div? Basically I've got 3 divs that are effecting this problem. I've got a container div, a nav div, and a content div. Here's the CSS.

#wrapper {
	width: 800px;
	border: 8px solid white;
	border-radius: 15px;
	margin: 40px auto 40px auto; //Center and give space top+bottom
	background: black;
	box-shadow: -10px 10px 10px #2c2c2c; //Shadow from top-right
}
#nav {
	float: left;
	margin: 15px 15px 15px 0px;
}
#content {
	margin: 15px;
	height: 100%;
}

So the problem is that when I put enough content in the content div to make it taller than the nav div all the content from the content div goes under the nav div. I want the nav div to stretch to the bottom of the container div so the contented div won't go under it.

 

[CaldwellYSR]

oh no I take it back! I forgot to add float left to the content. Sorry guys false alarm! a;oierkljd I've been googling for the past half hour for such a stupid mistake. Is it possible to delete this thread?

 

[ronaldroe]

It still may not work. You'll need to use a clearfix:

HTML (place after the last floated element, but within the container):
<div class="clearfix"></div>

CSS:
.clearfix{
clear:both;
height:0px;
width:100%;
}

 

[CaldwellYSR]

Ah interesting. Any clarification on how that works? It worked for me because I also have a footer within that container that has clear: both and width: 100% but why does that fix the problem?

 

[ronaldroe]

For the same reason the footer does. The clearfix just allows you to do it within the same container as the floated elements. Different way to do the same thing.

 

[CaldwellYSR]

Hahaha right I was just trying to understand why those things fixed it. Or maybe why is the wrong question but rather how it worked I am glad that it worked, just a curious person in general.

 

[ronaldroe]

Floats pull elements out of the normal flow of the document and literally make them float. So, the container element in some browsers will act as if they aren't there. The clear property clears the floats, which is how the clearfix works. It puts an element after the floats to clear them. Not necessarily semantic, but it works.

 

[CaldwellYSR]

oh that makes sense

 

[Phreaddee]

the same can also be done without the clearfix by placing overflow:hidden on the parent container. it can also work with overflow:auto and overflow:scroll as well.

 

[CaldwellYSR]

ah sweet. I'll keep that in mind when I don't have a footer.

 

[PixelPusher]

the same can also be done without the clearfix by placing overflow:hidden on the parent container. it can also work with overflow:auto and overflow:scroll as well.

Far better method. No extra markup and correct use of css properties. Only issue with "auto" and "scroll" is the occasional scroll bars.

 

[Phreaddee]

true, hidden is the preferred option, but thought I'd put the three up anyway!