CODEWITHSUNDEEP
htmlcssbackground-color
Adrian Velez
Adrian Velez

Reputation: 23

Background-color is not fully filling the div

Background-color is not fully filling the div ( I want to color the div between the navbar and the footer), the background color is only reaching maybe half of the page, is not filling all the way down till the end of the container.

So I hope you guys can help out on getting to the source of the issue, cause I have no idea what could be causing the problem :/

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>FunPic - Share your pictures</title>
    </head>

    <body>
        <div class="container">

            <div id="header">
                <div id="navtext">
                    <p>FunPic - Share your pictures</p>
                </div>
                <div id="menu">
                    <ul id="navbar">
                        <li>Inicio</li>
                        <li>Subir Foto</li>
                        <li>Contacto</li>
                    </ul>
                </div>
            </div>

            <div id="wrapper">
                <div id="content">
                    <div id="image"><img src="images/pic.jpg"></div>
                </div>
                <div id="content">
                    <div id="image"><img src="images/pic.jpg"></div>
                </div>
                <div id="content">
                    <div id="image"><img src="images/pic.jpg"></div>
                </div>
                <div id="content">
                    <div id="image"><img src="images/pic.jpg"></div>
                </div>
            </div>

        </div>
        <div id="footer">&copyFun Pic 2015 - Costa Rica</div>
    </body>

</html>

Here's the CSS:

{
    max-width: 1024px;
    color: red;
    margin: auto;
}
html, body {
    width: 100%;
    margin: 0 auto;
    height: 100%;
}
.container {
    margin: 0 auto;
    width: 100%;
    background-color: #E8E8E8;
    height: 100%;
}
#header {
    margin-bottom: 30;
    width: 100%;
    height: 50px;
    float: left;
    background: #8AE6B8;
}
#navtext {
    padding: 14;
    width: 40%;
    float: left;
}
#navtext p {
    margin-left: 40%;
}
#menu {
    padding: 14;
    width: 40%;
    float: left;
}
#navbar {
    margin-left: 65px;
    width: 100%;
    float: left;
}
#navbar li {
    list-style: none;
    margin-right: 10;
    display: inline-block;
}
#wrapper {
    margin: 30;
    width: 100%;
    float: left;
}
#content {
    margin: 0 auto;
    width: 40%;
    height: 600px;
    display: block;
}
#image {
    width: 100%;
    margin: 0 auto;
}
#image img {
    width: 100%;
}
#footer {
    margin: auto;
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: #202020;
    clear: both;
}

Upvotes: 1

Views: 566

Answers (2)

Zain Aftab
Zain Aftab

Reputation: 701

Do it like this

#wrapper {
    background-color: #E8E8E8;
}

change #E8E8E8 to any color you want. This will only set the background-color property of your div between navbar and footer divs.

Upvotes: 2

Adrian Velez
Adrian Velez

Reputation: 23

I got it, i noticed i was coloring the CONTAINER instead of the WRAPPER..! ugh... i feel so dumb...

Upvotes: 0

Related Questions