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

csshtml

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 nested 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?

Best Answer

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".

Related Topic