HTML background-color

Question

I have the problem by setting "navigation bar" a background color. Everything was good, but then I added these lines it started not to work properly:

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

Even then I set background-color it isn't working. You see down below. I set background color to black color, but it's still white. And I can't understand why.

#nav {
    background-color: #222;
}

This is all my HTML Code:

<html>
    <head>
        <title>Fero Estetra</title>
        <link type="text/css" rel="stylesheet" href="style.css" />
    </head>

    <body>

        <div id="nav">
            <div id="nav_wrapper">
                <ul class="pull-left">
                    <li><a href="#">Home</a></li><li>
                    <a href="#">About us</a></li><li>
                    <a href="#">Contact</a></li><li>
                    <a href="#">Social<img id="img1" src="nuotraukos/arrow.png" /></a>
                        <ul>
                            <li><a href="http://www.youtube.com/">Youtube</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Facebook</a></li>
                        </ul>
                    </li>
                </ul>

                <ul class="pull-right">
                    <li><a href="#">Register</a></li><li>
                    <a href="#">Login</a></li>
                </ul>

            </div>  
        </div>

    </body>
</html>

And this is all my CSS code:

body {
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    font-family: Arial;
    font-size: 18px;
}

#nav {
    background-color: #222;
}

#nav_wrapper {
    width: 960px;
    margin: 0 auto;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}

#nav ul li {
    display: inline-block;
}

#nav ul li:hover {
    background-color: #333;
}

#nav ul li img {
    vertical-align: middle;
    padding-left: 5px;
    transform: rotate(90deg);
    margin-top: -5px;
}

#nav ul li a,visited {
    color: #ccc;
    display: block;
    padding: 15px;
    text-decoration: none;
}

#nav ul li a:hover {
    color: #ccc;
    text-decoration: none;
}

#nav ul li:hover ul {
    display: block;
}

#nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
    min-width: 200px;
}

#nav ul ul li {
    display: block;
}

#nav ul ul li a,visited {
    color: #ccc;
}

#nav ul ul li a:hover {
    color: #099;
}

You need to clear the floats. Try adding `overflow:hidden` to `#nav` or use whatever clearfix is used in your grid system. — Paulie_D, Oct 29 '14 at 12:34
You can try this [clear float](http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increas) — rails_id, Oct 29 '14 at 12:35

score 0 · Accepted Answer · answered Oct 29 '14 at 12:35

Yep the problem cause because of float's Check this FIDDLE you need to clear the floats before the parent element gets closed parent which have floated elements

here

#nav:after{
  clear:both;
}

for more info Read this source. for browser compatablity issues use clearfix hack

HTML background-color

1 Answers1