CODEWITHSUNDEEP
csshtmlfooter
kylesimmonds
kylesimmonds

Reputation: 183

Footer runs through middle of div

I've spent the past two days troubleshooting this problem for my portfolio website, and have yet to find a solution.

The basic structure of the page is a header, a wrapper for content (nav bar and content divs), and the footer. The problem is that the footer is cutting through the middle of the wrapper div, making the content run around and below the footer. I would post a screenshot, but I don't have enough reputation.

It looks like the div containing the résumé info is the only one causing the problem, whereas the footer is only corresponding to the nav bar.

Code is below.

Additional info: When I tried setting the footer's position to fixed, it disappears completely from the page. I also tried removing the .wrapper div and just using the content divs. I also tried changing the positions of the divs to absolute and relative.

HTML

<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='icon' href='/favicon.png' />
<link rel='stylesheet' href='main.css' />
<link rel='stylesheet' href='webfonts.css' />

<title>Kyle Simmonds: Design, Writing and Web</title>

</head>
<body>

<header>
    <!--<a class='headerlogo' href="http://kylesimmonds.com"><h1>Kyle Simmonds</h1></a>-->
    <a href='index.html'>
            <ul>
                <li id='title'>Kyle Simmonds</li>
                <li id='subtitle'>Copywriting, Graphic Design and Web Development</li>
            </ul>
    </a>
</header>

<div class='wrapper'>

<!-- NAVIGATION BAR -->
    <nav>       
            <ul class='firstlevel'>
                <li><a href='index.html'>Home</a></li>
                <li><a href='resume.html'>R&eacute;sum&eacute;</a></li>
                <li><a href='portfolio.html'>Portfolio</a></li>
                <li><a href='blog.html'>Musings</a></li>
                <li><a href='contact.html'><font color='#f00'>Contact Me</font></a>
                    <ul class='secondlevel'>
                        <li>Email: <a href='mailto:[email protected]'>[email protected]</a></li>
                    </ul>
                </li>
            </ul>
    </nav>

    <div class='content' id='resume'>

        <h2>ABOUT ME</h2>
            <p></p>
<hr />
        <h2>EXPERIENCE</h2>
            <h4>Gulliver's Travel</h4>
            <ul>
                <li id='jobtitle'>Social Media Intern</li>
                <li id='subhead'>January&ndash;August '12</li>
                <li>// Established and managed company's Facebook and Twitter pages</li>
                <li>// Created graphics for emails and promotions</li>
            </ul>

            <h4>TCU Schieffer School of Journalism</h4>
            <ul>
                <li id='jobtitle'>Website Assistant</li>
                <li id='subhead'>August '09&ndash;December '12</li>
                <li>// Uploaded content onto the school's website through HTML and CSS</li>
                <li>// Managed the site by keeping it free of visual and typographical errors</li>
            </ul>

            <h4>TCU Student Activities</h4>
            <ul>
                <li id='jobtitle'>Graphic Designer</li>
                <li id='subhead'>September '10&ndash;December '12</li>
                <li>// Designed posters for campus-wide events</li>
                <li>// Created invitations and printed materials for special events</li>
            </ul>

            <h4>Peaceable Kingdom Retreat for Children</h4>
            <ul>
                <li id='jobtitle'>Summer Staff</li>
                <li id='subhead'>Summer '10&ndash;'11</li>
                <li>// Facilitated activities for campers including high-ropes courses (zip line and rock climbing) and pool activities</li>
                <li>// Ensured a safe and fun environment for campers by being lifeguard, CPR and high-ropes certified</li>
            </ul>

<hr />  
        <h2>SKILLS</h2>
            <ul id='skills'>
                <li>// Advertising</li>
                <li>// Copywriting/editing</li>
                <li>// Graphic Design</li>
                <li>// Photoshop</li>
                <li>// InDesign</li>
                <li>// Illustrator</li>
                <li>// Web Development</li>
                <li>// HTML</li>
                <li>// CSS</li>
                <li>// jQuery</li>
                <li>// Audio/Video Editing</li>
            </ul>

<hr />
        <h2>EDUCATION</h2>
            <h4>Texas Christian University</h4>
            <ul>
                <li id='subhead'>December '12</li>
                <li>// BS Strategic Communication</li>
                <li>// Music Minor</li>
                <li>// Studies in Italian</li>
            </ul>

    </div>
</div>

<footer>
<p>&copy; 2013 Kyle Simmonds. All rights reserved.</p>
</footer>

<script src='jquery-1.8.3.js'></script>
<script src='jquery-ui-1.9.2.custom.min.js'></script>

</body>
</html>

CSS

body{
font-family:'OpenSans', sans-serif;
margin:0 auto;
padding:0px;
width:100%;
height:100%;
}

a, a:hover,a:active,a:visited{
text-decoration:none;
color:#000;
}

header{
width:100%;
height:70px;
background:#000;
margin:0 auto;
padding:0px;
}

    header h1{
        margin:0 0 0 10px;
        }

    header h4{
        font-weight:300;
        margin:10px;
        }

            header ul{
                width:960px;
                margin:0px 0 0 0;
                padding:8px 0 0 50;
                overflow:hidden;
                }

            header li{
                list-style:none;
                display:inline;
                }

                    #title{
                        font-size:36px;
                        color:#fff;
                        }

                    #subtitle{
                        font-size:12px;
                        font-weight:lighter;
                        font-style:italic;
                        color:#ddd;
                        }

.wrapper{
height:100%;
width:960px;
margin:0 auto;
margin-bottom:10px;
padding:0px;
position:relative;
}

    nav{
        height:100%;
        width:300px;
        margin:0 auto;
        float:left;
        padding:10px;
        }

            nav .firstlevel{
                height:100%;
                margin:0px;
                padding:0px;
                display:block;
                border-right:solid 2px #000;
                float:left;
                }

            nav .firstlevel li{
                list-style-type:none;
                font-weight:lighter;
                font-size:16px;
                padding:10px;
                }

                    nav .secondlevel ul{
                        display:inline;
                        }

                    nav .secondlevel li{
                        font-size:12px;
                        margin:0 0 0 -30px;
                        padding:10px;
                        }

    .content{
        height:100%;
        width:600px;
        margin:10px 0 0 50;
        padding:0px;
        position:absolute;
        }

            .content p{
                font-size:12px;
                }

                hr{
                    border:0;
                    height:1px;
                    background:#aaa;
                    }

                    #resume{
                        display:inline;
                        }

                            #resume h2{
                                font-size:16px;
                                color:#aaa;
                                margin-bottom:5px;
                                padding:0;
                                }

                            #resume h4{
                                font-size:14px;
                                color:#444;
                                margin-top:15px;
                                margin-bottom:0;
                                }

                            #resume ul{
                                margin:0 0 0 0px;
                                }

                                    #jobtitle{
                                        font-weight:bold;
                                        font-size:16px;
                                        margin:3px 0 0 0;
                                        }

                                    #subhead{
                                        color:#aaa;
                                        }

                            #resume li{
                                font-size:12px;
                                list-style:none;
                                display:block;
                                margin:0;
                                padding:0;
                                }

footer{
background-color:#000;
height:6%;
width:100%;
margin:0 auto;
margin-bottom:0px;
padding:0px 0 0 0;
position:absolute;
clear:both;
}

    footer p{
        position:relative;
        font-size: 10px;
        color:#fff;
        text-align:right;
        margin:8px 10 0 0;
        }

Also, if you have suggestions for making this a better question, or for better code, please let me know. Thank you for any help.

Upvotes: 1

Views: 247

Answers (2)

kylesimmonds
kylesimmonds

Reputation: 183

What I (stupidly) realized was that the DOCTYPE says html5, when html is the correct declaration. @TiesonT. thank you for helping. Changing the DOCTYPE solved the problem.

Upvotes: 1

Tieson T.
Tieson T.

Reputation: 21191

Okay, so I have a few suggestions. You can go look at the updated jsFiddle, here:

http://jsfiddle.net/tf4cq/1/

Basically, there isn't any good reason to have .content positioned absolutely. You floated the sidebar (your nav menu), so to make sure the content lines up correctly on the left side, just add a left-padding value equal to or greater than the width of the sidebar.

The reason your footer doesn't wind up where you thought it should is that the two elements above it (the nav bar and the content) are both taken out of the normal document flow as soon as you apply either float or position: absolute (or fixed, for that matter).

Basically, you just need to update your CSS file a bit:

body{
    font-family:'Open Sans', sans-serif;
    margin:0 auto;
    padding:0;
    width:100%;
    height:100%;
}

a, a:hover, a:active, a:visited{
    text-decoration:none;
    color:#000;
}

header{
    width:100%;
    height:70px;
    background:#000;
    margin:0 auto;
    padding:0;
}

    header h1{
        margin:0 0 0 10px;
    }

    header h4{
        font-weight:300;
        margin:10px;
    }

    header ul{
        width:960px;
        margin:0;
        padding:8px 0 0 50;
        overflow:hidden;
    }

    header li{
        list-style:none;
        display:inline;
    }

#title{
    font-size:36px;
    color:#fff;
}

#subtitle{
    font-size:12px;
    font-weight:lighter;
    font-style:italic;
    color:#ddd;
}

.wrapper{
    height:100%;
    width:960px;
    margin:0 auto 10px;
    padding:0;
    position:relative;
}

nav{
    height:100%;
    width:300px;
    margin:0 auto;
    float:left;
    padding:10px;
}

    nav .firstlevel{
        height:100%;
        margin:0px;
        padding:0px;
        display:block;
        border-right:solid 2px #000;
        float:left;
    }

    nav .firstlevel li{
        list-style-type:none;
        font-weight:lighter;
        font-size:16px;
        padding:10px;
    }

    nav .secondlevel ul{
        display:inline;
    }

    nav .secondlevel li{
        font-size:12px;
        margin:0 0 0 -30px;
        padding:10px;
    }

.content{
    height:100%;
    width:600px;
    margin:10px;
    padding:0;
    padding-left:300px;
}

    .content p{
        font-size:12px;
    }

hr{
    border:0;
    height:1px;
    background:#aaa;
}

#resume{
}

    #resume h2{
        font-size:16px;
        color:#aaa;
        margin-bottom:5px;
        padding:0;
    }

    #resume h4{
        font-size:14px;
        color:#444;
        margin-top:15px;
        margin-bottom:0;
    }

    #resume ul{
        margin:0 0 0 0px;
    }

    #resume li{
        font-size:12px;
        list-style:none;
        display:block;
        margin:0;
        padding:0;
    }

#jobtitle{
    font-weight:bold;
    font-size:16px;
    margin:3px 0 0 0;
}

#subhead{
    color:#aaa;
}

footer{
    background-color:#000;
    height:6%;
    width:100%;
    margin:0 auto;
    margin-bottom:0px;
    padding:0;
    position:absolute;
    clear:both;
}

    footer p{
        position:relative;
        font-size: 10px;
        color:#fff;
        text-align:right;
        margin:8px 10 0 0;
    }

Upvotes: 2

Related Questions