Floating element leaving its containg element

[pardicity3]

I didn't want to post this as I hate making people plow through my code just to find probably a simple error, but here it goes.

I am developing a new layout that breaks down to one header div with a 100% width, one main content area beneath that which also spans 100% width and contains two child div's--one for navigation and one for the real content. This page can be seen here:

http://www.mikesadventures.net/testing/index.html

My problem comes when I try and float the content div to the right of the navigation div. When this is done the content div seems to leave it's parent div. Here is the example page:

http://www.mikesadventures.net/testing/indexfr.html

See how the content exceeds the area contained by the main div with the white background? For you who are looking at the page in IE and are confused right now, this only seems to happen in Moz. Or atleast Moz 1.2a on windows 2k.

I thought maybe there was something wrong with my divs that was preventing them from being floated. But I tried to move the content div below the navigation div and then float the navigation div to the left. This seemed to work which made me wonder about my theory that I couldn't float either div. An example of the page with the left floating nav can be seen here:

http://www.mikesadventures.net/testing/indexfl.html

I am not quite sure what is going on now. I know there is a lot of code in there (well not A LOT, but enough to make it annoying...), but hopefully the problem will be easy to find.

[ronaldb66]

I'm not sure what your problem is, but I'd say float the navigation left and place it above the content which follows normal flow.
If you don't want the content to flow around the nav (it did that in a small window), set the left margin high enough to create room for the nav.
I didn't see mentioned overlapping problems (IE... :o ), but it may be a dimension conflict, i.e. margins + width > 100% or whatever room is available. You're right, I was too lazy to plough through the entire source.

[meow]

That's supposed to happen. A float doesn't occupy any space so it doesn't define the size of the box it's contained in.
http://www.w3.org/TR/REC-CSS2/visuren.html#floats

You need an element with clear: right or clear both after the float to make the outer block expand.

[liorean]

Which is a problem is the element you have in it is inline, because Opera, correct as it is on this point, renders the content of the float without it.