How do I make footer take 100% of the width of the webpage?


Tags: html,css

Problem :

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>Jack Yuan | Web Developer</title>
        <link rel="stylesheet" href="CSS/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="CSS/main.css">
        <link rel="stylesheet" href="CSS/responsive.css">

    </head>

    <body>

        <header>

            <a href="index.html" id="logo">
                <h1>Jack Yuan</h1>
                <h2>Web Developer</h2>
            </a>

            <nav>

                <ul>
                    <li><a href="about.html"class="selected">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>

            </nav>
        </header>
        <div id="wrapper">
        <section>
            <ul id="gallery">
                <li id="pic1">
                    <a href="img/Jack.jpg">
                    <img src="img/Jack.jpg" width="500" height="400" alt="">
                    <p> This is me </p>
                    </a>
                </li>
                <li id="pic2">
                    <a href="img/Life.jpg">
                    <img src="img/Life.jpg"width="500" height="400"  alt="">
                    <p> This concludes my life(lol!) </p>
                    </a>
                </li>
                <li id="pic3">
                    <a href="img/Study.jpg">
                    <img src="img/Study.jpg"width="500" height="400" alt="">
                    <p> This shows what I study </p>
                    </a>
                </li>
                <li id="pic4">
                    <a href="img/2.jpg">
                    <img src="img/2.jpg"width="500" height="400" alt="">
                    <p> This is what I believe</p>
                    </a>
                </li>
            </ul>
        </section>
        <footer>
            <div id="mus">
            <embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
            </div>
            <div id="logo">
            <a href="https://www.facebook.com/jackyuan.jack">
            <img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
            </a>
            <a href="https://twitter.com/Jack19909100">
            <img src="img/twitter.png" alt="Twitter Logo" class="icon">
            </a>
            </div>
            <p>Jack Yuan</p>
            <p>All Rights Reserved.</p>
        </footer>
      </div>
    </body>
</html>

Here is my CSS

a {
    text-decoration:none;
}



#wrapper {
    max-width:940px;
    margin: 0 auto;
    padding: 0 5%;
}

#logo {
    text-align: center;
    margin: 0;
}

h1 {
    margin: 0;
    padding-top: 4mm;
    font-size: 2em;
    font-family: 'Lobster', cursive;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 1.5em;
    margin: -5px 0 0;
    font-weight: normal;
}

body{
    font-family: 'Gloria Hallelujah', cursive;
}

a {
    color: #6ab47b;
}

header{
    background: #6ab47b;
    border-color:#599a68;
    float:left;
    margin: 0;
    padding: 5px 0 0 0;
    width: 100%;
}

nav{
    background:  #599a68;
    text-align: center;
    margin: 20px 0 0;
}

nav a, nav a:visited {
    color:#fff;
}

nav ul{
    list-style: none;
    margin: 0 10px;
    padding: 0;
}



nav a{
    font-weight: 800;
    padding: 15px 10px;
}

h1, h2{
    color:#fff;
}

nav a.selected , nav a:hover {
    color:#32673f;
}

footer{
    font-size: 1em;
    text-align: center;
    clear:both;
    padding-top: 20px;
    color: #ccc;
    line-height: 0.8em;
    background: black;
    margin:0;
}


img{
    max-width: 100%;
}

#gallery{
    margin: 0;
    padding: 0;
    list-style: none; /** remove bullet point **/
}

#gallery li{
    float:left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p{
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    color: #bdc3c7;
}



.icon{
    width: 40px;
    height: 40px;
    margin: 5mm 5px;
}

body{
    background: orange;
    margin:0;
    color:#999;
}

Why it only takes a portion of the width of the webpage? I tried to set max-width and width 100%, it did not work. How do I make footer take 100% of the width of the webpage? That is what I am trying to do.



Solution :

Your footer is inside the div.wrapper. Move it outside of the div. You'll have to fix the margin.


    CSS Howto..

    How to get MathJax's HTML output just like Stackedit.io?

    How to revert back to a value in css [closed]

    How to reject specify HTML tags by using css or xpath selector

    CSS - EM Values Inconsistent, How To Debug / Explanation

    MVC How make a logout button

    How to add a style to