Why is "float: right;" eliminating the background color of the div that contains it?

Question

I'm trying to get 3 divs to be on the same line, pushed off the right, side-by-side. They are the divs of class nav-button. As you can see right now, they are stacked on top of each other to the left, and the div containing them has a blue background. As soon as I add float: right; to the nav-buttons, they line up like I want to them to, but for some reason their containing div loses its background color. Could someone explain why?

Link: http://jaminweb.com/bestOfLR.php

HTML:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type"text/css" href="LR_styles.css"/>
</head>
<body>
    <div class="outer-container">
        <div class="header-container">
            <div class="header-bluetop">
                <div class="logo-blob">
                    <span>L</span>
                    <span>e</span>
                    <span>t</span>
                    <span>s</span>
                    <span>R</span>
                    <span>u</span>
                    <span>n</span>
                    <span>.</span>
                    <span>c</span>
                    <span>o</span>
                    <span>m</span>
                </div>
                <div class="nav-container">
                    <div class="nav-button">
                        <h3>Best Posters</h3>
                    </div>
                    <div class="nav-button">
                        <h3>Best Posts</h3>                   
                    </div>
                    <div class="nav-button">
                        <h3>News</h3>                      
                    </div>
                </div>
            </div>
            <div class="subheader">

            </div>
        </div>
        <div class="middle-conatiner">

        </div>
        <div class="footer-container">

        </div>
    </div>

</body>
</html>

CSS:

div.outer-container
{font-family: "Lato","Droid Sans",Arial,Verdana,sans-serif;}

div.header-container
{}
    div.header-bluetop
    { background-color: #00325F; position: relative; }
        div.logo-blob
        {
            position: absolute;
            top: 0px;
            left: 30px;
            width: 250px;
            height: 64px;  
            background-color: #F8C525;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            font-size: 25px;
            font-weight: 100;
            line-height: 64px;
            text-align: center;
            letter-spacing: 0.5px;
            border: 5px solid #FFF;
        }
            div.logo-blob > span 
            { font-family: "Droid Serif",serif; font-size: 25px; font-weight: 100; }
            div.logo-blob > span:nth-of-type(2n)
            { color: #306AB5; }
            div.logo-blob > span:nth-of-type(2n+1)
            { color: #d42222;; }

        div.nav-container
        {}
            div.nav-container > div.nav-button
            {  }
                div.nav-container > div.nav-button > h3:nth-of-type(2n+1)
                { color: #FFF; }
                div.nav-container > div.nav-button > h3:nth-of-type(2n)
                { color: #F8C525; }

div.subheader
{}

div.middle-container
{}

div.footer-container
{}

Bonus point: Why is

            div.nav-container > div.nav-button > h3:nth-of-type(2n+1)
            { color: #FFF; }
            div.nav-container > div.nav-button > h3:nth-of-type(2n)
            { color: #F8C525; }

not working?

it doesn't. it loses it's height and thus you don't see the blue. set a fix height or play with the display: parameter. also you may want to add a div set to clear:both at the end of the nav buttons. — Chris S., Oct 18 '14 at 15:59

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Because when you float your nav-button elements, your container element has no in-flow elements within it, what with your logo-blob being absolutely positioned.

overflow:hidden has the additional benefit of clearing floats:

Of course, there are other ways to clear floats.

As for your nth-of-type() selectors, you are applying them to the wrong element:

div.outer-container {
    font-family:"Lato", "Droid Sans", Arial, Verdana, sans-serif;
}
div.header-container {
}
div.header-bluetop {
    background-color: #00325F;
    position: relative;
}
div.logo-blob {
    position: absolute;
    top: 0px;
    left: 30px;
    width: 250px;
    height: 64px;
    background-color: #F8C525;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 25px;
    font-weight: 100;
    line-height: 64px;
    text-align: center;
    letter-spacing: 0.5px;
    border: 5px solid #FFF;
}
div.logo-blob > span {
    font-family:"Droid Serif", serif;
    font-size: 25px;
    font-weight: 100;
}
div.logo-blob > span:nth-of-type(2n) {
    color: #306AB5;
}
div.logo-blob > span:nth-of-type(2n+1) {
    color: #d42222;
    ;
}
div.nav-container {
    overflow:hidden;
}
div.nav-container > div.nav-button {
    float:right;
}
div.nav-container > div.nav-button:nth-of-type(2n+1) > h3 {
    color: #FFF;
}
div.nav-container > div.nav-button:nth-of-type(2n) > h3 {
    color: #F8C525;
}
div.subheader {
}
div.middle-container {
}
div.footer-container {
}

<div class="outer-container">
    <div class="header-container">
        <div class="header-bluetop">
            <div class="logo-blob"> <span>L</span>
 <span>e</span>
 <span>t</span>
 <span>s</span>
 <span>R</span>
 <span>u</span>
 <span>n</span>
 <span>.</span>
 <span>c</span>
 <span>o</span>
 <span>m</span>

            </div>
            <div class="nav-container">
                <div class="nav-button">
                     <h3>Best Posters</h3>

                </div>
                <div class="nav-button">
                     <h3>Best Posts</h3> 
                </div>
                <div class="nav-button">
                     <h3>News</h3> 
                </div>
            </div>
        </div>
        <div class="subheader"></div>
    </div>
    <div class="middle-conatiner"></div>
    <div class="footer-container"></div>
</div>

Why is "float: right;" eliminating the background color of the div that contains it?

1 Answers1