CSS bleed over, despite height set to auto with nested divs

I'm trying to get a simple skeleton formed for a web page, and I'm having trouble with my divs lining up. For some reason I have ne开发者_如何学编程sted divs bleeding outside of their parent divs, even though I have the parent divs' height set to auto.

Here is the markup I have set out:

    <h1><center>Title</center></h1>

    <div class="main">
        <nav>
            <div class="button">
                Link 1
            </div>                  
            <div class="button">
                Link 2
            </div>
            <div class="button">
                Link 3
            </div>
        </nav>
        <br/>
        <br/>

        <div class="mainPic">

        </div>

        <div class="sideText">

        </div>

        <p>
            Main text.
        </p>
    </div>

and here is the CSS I have modifying the divs:

div.main {
    border: 1px solid black;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    height: auto;
    padding: 20px;
}

nav {
    border: 1px dashed black;
    width: auto;
    height: auto;
}

div.button {
    border: 1px solid black;
    padding: 2px;
    float: left;
    margin-right: 10px;

}

div.mainPic {
    border: double black;
    width: 60%;
    float: left;
    height: 50px;
}

div.sideText {
    border: dotted black;
    width: 30%;
    float: right;
    height: 50px
}

My problems are: 1) The nav acts like it has nothing inside it (the dashed line), even though I have my button classes nested within it. 2) My "mainPic" (double solid line) div flows outside of my "main" div, even though the height on main is set to auto. Same goes for the right side inner panel (dotted line). 3) I want my main text block to appear below the two inner boxes, yet it shows up between them.

How do I fix these?

Add the following

nav, div.main {
  position: relative;
  overflow: hidden;
}

this will cause the floating contents of nav and div.main to remain inside their respective parents.

edit

It has been pointed out that the position: relative; is probably not necessary in modern browsers. Therefore, the following should work just as well:

nav, div.main {
  overflow: hidden;
}

Here's a link to the part of the CSS Spec that discusses flow root. Setting overflow:hidden establishes a box as a "flow root", and the spec defines special rules for computing the height of an element that is a "flow root".

Add a div for clearing your float to your html file:

<div class="mainPic"></div>
<div class="sideText"></div>
<div class="clear" />
<p>Main text.</p> 

Css

.clear { clear: both; }

Add overflow:hidden to any parent element that contains a floated child. This will clear the floated elements without having to add extra DIVs.

Note, for IE to act the same as other browsers, add zoom:1; to go with overflow:hidden. This will add hasLayout for IE6.

Try adding a spacing element with clear: both after the floating elements.

This is because the nested divs are floated. If you need the float, add float: left; for the main div also.

1) The <nav> is collapsed because you are floating the buttons. Instead try display: inline or display: inline-block for the buttons.

2, 3) Float is the culprit here as well. Clear the float on your <p> element:

p {
    clear: left;
}

Or don't float div.mainPic at all. Since you already have .sideText floating right, that should be good enough. You would have to move the .sideText ahead of div.mainPic in the html.

By the way, since you are already using HTML5 with <nav>, perhaps it would be appropriate to use <aside> instead of <div class="sideText">.