CODEWITHSUNDEEP
htmlcss
DrinkJavaCodeJava
DrinkJavaCodeJava

Reputation: 808

Window div extends beyond footer

I have been trying to make my website have a wrapper with even margins, however the bottom margin would always be too big. To isolate the issue I commented out all div contents in the html and commented out all css selectors that are not related to the basic divs and still the window div would go past the footer.

Here is the css, you'll notice that some css attributes are misspelled by beginning with s. Don't worry about those, thats just a quick way I comment out css attributes.

.window {
    width: 88%;
    height: 99%;
    smargin-top: 3%;
    smin-height: 800px;
    margin-left: 7%;
    sbox-shadow: 0px 0px 10px 1px #000000;
    min-width: 1110px;
    background-color: #FF0000;
}
.header {
    height: 15%;
    width: 100%;
    background-color: #DDDDDD;
    padding-top: 1%;
    smin-height: 100px;
}
.nav {
    font-size: 20px;
    spadding-top: 1%;
    height: 5%;
    width: 100%;
    background-color: #999999;
    font-family: Tahoma, Geneva, sans-serif;
    smin-height: 35px;
    max-height: 40px;
}
.content {
    height: 60%;
    width: 100%;
    smin-height: 350px;
    : ;
    spadding-top: 3%;
    background-color: #FFFFFF;
}
.footer {
    font-family: Arial, Helvetica, sans-serif;
    height: 5%;
    width: 100%;
    background-color: #DDDDDD;
    smin-height: 30px;
}

Here is the html, I excluded all all the commented out contents so the problem will be isolated from it's basic foundational structure.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Excercise 2 CSS</title>
</head>

<body>
    <div class="window">
             <div class="header">

             </div>
             <div class="nav">

             </div>
             <div class="content">

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

             </div>
        </div>
</body>
</html>

Upvotes: 0

Views: 560

Answers (1)

chris.antonellis
chris.antonellis

Reputation: 86

Your addition was incorrect. In your CSS you have the heights as: header 15%, nav 5%, content 60%, and footer 5%, which only equal 85% when added together. I'm not positive how padding would affect a layout like this, but if you apply box-sizing: border-box; to your divs, the padding will not affect the overall size (will work subtractively as opposed to additively)

Corrected code is below (although i stripped out most of your other css)

html, body
{
    height: 100%;
}

.window {
    height: 100%;
    width: 100%;
    background-color: #FF0000;
}
.header {
    height: 15%;
    background-color: #DDDDDD;
}
.nav {
    height: 5%;
    background-color: #999999;
}
.content {
    height: 75%;
    background-color: #FFFFFF;
}
.footer {
    height: 5%;
    background-color: #DDDDDD;
}​

Upvotes: 1

Related Questions