Remove white space after my footer

Question

HELLLLP!!! I crated a web page with a footer and added a div with content. Now my footer has a lot of white space under it. I've done everything to eliminate this white space. overflow: hidden; or its x and y counter parts not working. Setting the hight of html or body to 100% doesn't seem to work. The position: absolute; doesn't seem to work. I have removes all margins and all padding and still not working. HEEEEEEELP!!!!!!!!!!!!

Answer 1 · 2015-09-29T08:40:36Z

September 29, 2015 8:40am

Hi. When you open the page in Chrome and select Inspect Element it should help you figure out what is creating the whitespace. And, as mentioned above, it would be very helpful to see the code your using to determine what's going wrong here.

Answer 2 · 2015-09-29T18:27:47Z

September 29, 2015 6:27pm

html code______________________

<!doctype html> <html> <head> <meta charset="utf-8"> <title>LafGraphics & WebDev </title> <link href="css/laf.css" rel="stylesheet" type="text/css" /> <link rel="icon" href="images/LAF_Favicon.ico" type="image/x-icon" /> <link href="http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css">

<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

</head>

<body>

<div id="navContainer"> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a> <ul> <li><a href="illustrations.html">Illustrations</a></li> <li><a href="businessCards.html">Bus Cards</a></li> <li><a href="logos.html">Logos</a></li> <li><a href="Documents.html">Documents</a></li> </ul>

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>

</nav> </div>

<div class="resume-bg">
</div><!--resume-bg-->

<!--<div id="para1">
    <p style="color: #FFF">Professional customer service support specialist & Graphic Designer experienced working in a fast-paced environment demanding strong organizational, technical, and interpersonal skills.  Turstworthy, ethical, discreet, committed to excellent customer service.  Capable of effective communication on all professional levels. Very detailed and capable of finishing projects by alloted deadline; effective in workplace <br>multi-tasking.  Capabilities include:</p>
</div>--para1-->

<!--<div id="listcontent">

<div class="list1">
    <ul>
        <li>Customer Service &amp; Relations</li>
        <li>Word Processing &amp; Typing</li>
        <li>Computer Graphics &amp; Design</li>
        <li>Web Development</li>
    </ul>
</div><!--list1-->
    <!--<div class="list2">
        <ul>
            <li>Contract Paperwork &amp; Documentation</li>
            <li>Filing &amp; Data Archiving</li>
            <li>Office Production &amp; Services</li>
        </ul>
    </div><!--list2-->
<!--<div class="list3">
    <ul>
        <li>Telephone Receptionist</li>
        <li>10 Key Experience</li>
        <li>Work Place Production &amp; <br>
            Management
        </li>
    </ul>
</div><!--list3-->

<div id="boxContent"> <h1 class="title2">Design History</h1> <p>An Illustrator by nature Allin Obianozie began his artistic endavors at the early age of six immitating some of the greatest comic book artists of the early ninety's. Tired of making copies of other artist's work Allin began entertaining himself with other forms of art. Drawing, being one his most primary art styles, recived very little attention as he bagan his college career in visual communication. In this endeavor Allin was introduced to early development of Photoshop and Illustrator and quickly saw the potential of these program capabilities. Over 3 years into to his design degree he took on various freelance jobs which yeilded him the brutal truth of realworld operations and design skill. Many projects were either denied because of the lack of skill or stolen without payment. This brought out the respect of the design industry, The process of design, and rules of marketing for the targeted client. As more professional experience was obtained and conceptual development took place within the process of design an intrest of combining design and webdevelopment took place. Now, as a aspiring Graphics and Web Designer, Allin Continues his freelance endeavors while finishing his education at the American Intercontinental University Online.</p> </div> </div>
 <footer> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</footer>

</body> </html>

CSS___________________

.home-bg{ background-image: url(../images/heading2.jpg); background-repeat: no-repeat; background-size: 100%; margin: 10px auto; padding: 0 auto; /background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; -webkit-background-size: cover;/ width: 1065px; height: 635px; }

.resume-bg{ /background-image:url(../images/ResumeLayout.jpg);/ background-repeat: no-repeat; position: inherit; width: 600px; height: 1075px; padding-bottom: 0; margin-bottom: 0; overflow: hidden; clear: both; }

navContainer{

margin: 0 auto;
padding: 0 auto;
width: 100%;
background-color:#ddd;   
height: 50px;
display: block;
clear: both;
box-shadow: 2px 3px 4px #514E4E;

}

html, body { width: 100%; overflow-x: hidden; padding: 0 0 0 0; }

body{

width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background-image:url(../images/backgroundrepeat.png);
background-repeat: repeat;
clear: both;
overflow-y: hidden;

}

html { padding: 0 0 0 0; margin: 0 0 0 0; min-height: 900px; }

nav{ clear: both; margin: 0 auto; padding: 0 auto; }

nav ul { -webkit-font-smoothing:antialiased; text-shadow:0 1px 0 #FFF; background: #ddd; list-style: none; margin: 0 0 0 19%; padding: 0; width: 100%; clear: both; } nav li { float: left; margin: 0; padding: 0; position: relative; min-width: 15%; } nav a { background: #ddd; color: #444; display: block; font: bold 16px/50px sans-serif; padding: 0 25px; text-align: center; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } nav .dropdown:after { content: ' ▶'; } nav .dropdown:hover:after{ content:'\25bc' } nav li:hover a { background: #ccc; } nav li ul { float: left; left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 1; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } nav li:hover ul { opacity: 1; top: 50px; visibility: visible; } nav li ul li { float: 0; width: 100%; } nav li ul a:hover { background: #bbb; }

/* Clearfix

.cf:after, .cf:before { content:""; display:table; } .cf:after { clear:both; } .cf { zoom:1; }*/

wrapper{

width: 100%;
/*max-height: 950px;*/
background-color: #FFFFFF;
display: block;
box-shadow: 0 0 3px 4px rgba(0,0,0,0.8);
margin: 0;
padding: 0;

}

.container1{ width: 1065px; height: 532.5px; margin: 0 auto; padding: 0 auto; }

.content1{ background-image:url(../images/stationary.jpg); background-repeat: no-repeat; background-size: 100%; background-color:#393737; width: 525px; height: 525px; box-shadow: 2px 3px 4px 2px #514E4E; float: left; margin-right: 10px; }

.content2{ background-image:url(../images/Flyer%20ad%20bg.jpg); background-repeat: no-repeat; background-size: 100%; width: 525px; height: 525px; box-shadow: 2px 3px 4px 2px #514E4E; float: left; }

.container2{ width: 1065px; height: 532.5px; margin: 25px auto; padding: 0 auto; }

.content3{ background-image:url(../images/Web%20development..jpg); background-repeat: no-repeat; background-size: 100%; width: 525px; height: 525px; box-shadow: 2px 3px 4px 2px #514E4E; float: left; margin-right: 10px; }

.content4{ background-image: url(../images/Signs%20and%20Graphics.jpg); background-repeat: no-repeat; background-size: 100%; width: 525px; height: 525px; box-shadow: 2px 3px 4px 2px #514E4E; float: left; }

para1{

float: left;
clear: both;
position: relative; 
max-width: 525px;
max-height: 150px;
font-size: 12px;
margin-bottom: 0;
padding-bottom: 0;
padding-left: 55px;
bottom: 850px;
text-align:justify;

}

.title{ font-family: "Times New Roman"Cambria, "Hoefler Text", "Liberation Serif", Times, serif; font-style:italic; font-size: 1em; color:#FFF; margin: 0; padding: 0; }

para2{

float: left;
clear: both;
position: relative;
max-width: 550px;
max-height:150px;
font-size: 12px;
margin: 0;
padding: 0;
padding-left: 55px;
bottom: 870px;
color: #FFF;

}

para3{

float: left;
clear: both;
position: relative;
max-width: 550px;
max-height:150px;
font-size: 12px;
margin: 0;
padding: 0;
padding-left: 55px;
bottom: 880px;
color: #FFF;

}

para4{

float: left;
clear: both;
position: relative;
max-width: 535px;
max-height:150px;
font-size: 12px;
margin: 0;
padding: 0;
padding-left: 55px;
bottom: 890px;
color: #FFF;

}

para5{

float: left;
clear: both;
position: relative;
max-width: 535px;
max-height:150px;
font-size: 12px;
margin: 0;
padding: 0;
padding-left: 55px;
bottom: 640px;
color: #FFF;

}

/.push{ widyh: 100%; height: 900px; }/

footer{ width: 100%; background-color: #989898; box-shadow: 0 0 3px 4px rgba(0,0,0,0.9); margin: 0; padding: 0; bottom: 0; position: relative; }

a.boxHover{ display: block; height: 100%; width: 100%; text-decoration: none;
}

listcontent{

width: 600px;
height: 100px;
float: left; 
position: relative; 
bottom: 865px;
padding: 0 0 0 30px;
margin: 0;
display: block;

}

.list1{ float: left; color:#FFFFFF; font-size: 11px; display: block; padding: 0; margin: 0; }

.list2{ float: left; color:#FFFFFF; font-size: 11px; padding: 0; margin: 0; display: block; }

.list3{ float: left; color:#FFFFFF; font-size: 11px; padding: 0; margin: 0; display: block; }

boxContent{

width: 20%;
float: right;
position: relative;
bottom: 1075px;
font-size: 1em;
padding: 50px 50px 50px;
margin:  0;
background-color:rgba(0,0,0,0.78);
color: #FFF;
height: 1025px;
z-index: -999;

}

.title2{ font-family: "Times New Roman"Cambria, "Hoefler Text", "Liberation Serif", Times, serif; font-style:italic; font-size: 2em; color:#FFF; margin: 0; padding: 0; text-align: center; }

wrapper2{ width: 100%; margin: 0; padding: 0;

}

Welcome to the Treehouse Community

Looking to learn something new?

Allin Obianozie

Allin Obianozie

Remove white space after my footer

Justin Iezzi

Justin Iezzi

2 Answers

rvandaalen

rvandaalen

Allin Obianozie

Allin Obianozie

navContainer{

wrapper{

para1{

para2{

para3{

para4{

para5{

listcontent{

boxContent{