Problem with a too much space below footer

Get Started
1

Hi everybody, Im new here and Im begginer in HTML and CSS, I bought a book from sitepoint “Build Your Own Website The Right Way Using HTML &CSS” The book is great, learned allot. But I have one problem, I have started to build my own website, and everything is ok except below footer I have too much space, I meed I can scroll with my mouse down and I can not see my webpage any more. Does anybody have solution? I think Its a little problem but I cant solve it.
Here is my css: what am I doing wrong?

body{
font-family:Verdana,Helvetica,Arial,sans-serif;

}
 #wrapper{
padding-top: 20px;
 width: 100%; 
min-height:100%;
max-height:50px;
} 

header{
 position: relative;
 top:20px;
 left:200px; 
 width: 800px; 
 overflow: hidden; 
 border:2px solid white;
 border-bottom:none;
margin:0;
padding:0;
 }
 nav{
 display:block;
 border:2px solid white; 
 position:relative ;
 top:20px;
 left:200px;
 font-family: tomha, arial; 
 width: 800px;
 height:26px;
 background-color:#000000;
margin:0;
padding:0;
 
 }
nav ul{

}
nav li{
float:left;
list-style:none;
}
nav li a{
position:absolute;
top:6px;
padding: 0 20px; 
font-weight: bold; 
font-size: 12px; 
color: #fff; 
text-decoration: none;
}
.faq.test.cont.res.tip{
position:absolute;
left:200px;
}
.faq{
position:absolute;
left:250px;
}
.test{
position:absolute;
left:320px;
}
.cont{
position:absolute;
left:450px;
}
.res{
position:absolute;
left:550px;
}
.tip{
position:absolute;
left:640px;
}
a:hover{
text-decoration:none;
color:gray;

}
#bodycontent{
 display:block;
 border:2px solid white;
 border-right:none;
 border-top:none;
border-bottom:1px solid white;
 position:relative ;
top:-1px;
 left:200px;
 font-family: tomha, arial; 
 width: 550px;
 height:700px;
 background-color:#009933;
margin:0;
padding:0;
 
 }
 h1{
 padding-left:50px;
 padding-top:50px;
 color:#FFFF00;
 }
 h2{
 padding-top:10px;
 }
 h1 h2{
 line-height:5px;
 }
 #formandsocial{
 display:block;
 border:2px solid white;
 border-left:1px solid white; 
 border-top:1px solid white;
border-bottom:1px solid white;
 position:relative ;
 top:-703px;
left:752px;
 font-family: tomha, arial; 
 width: 249px;
 height:700px;
 background-color:#CCCCCC;
margin:0;
padding:0;
 
 }
 #footer{
margin:0;
padding:0;
display:block;
border-left:2px solid white;
border-right:2px solid white;
border-top:1px solid white;
border-bottom:2px solid white;
position:relative;
top:-703px;
left:200px;
background-color:black;
font-family:tomha,arial;
width:800px;
height:300px;
padding-bottom: 20px;
}
2

It’s going to be hard to see what’s going on without seeing the HTML as well, but there are a couple of things that jump out at me from the CSS.

.faq.test.cont.res.tip{
position:absolute;
left:200px;
}

This is not a valid declaration. If you want to use multiple class selectors, separate them with a comma:

.faq, .test, .cont, .res, .tip{
position:absolute;
left:200px;
}

Also, I’m not aware of the font “tomha”. You may want to use “Tahoma” instead.

You are using a lot of position:absolute, which is powerful but difficult to manage sometimes. I would use it very judiciously and instead rely on the natural flow of block-level elements in the page. I think you may have an absolutely positioned element that has some content in it that is large enough to cause the scrollbar to appear. Use a tool like Firebug to inspect your code and have it highlight elements on the page. I bet you’ll find the culprit then.

Also, avoid using the header element, since it’s HTML5 and not well supported on legacy browsers.

3

Hi MeLogic. Welcome to SitePoint. :slight_smile:

As raw10 says, we need to see your HTML as well to understand how your page works. I also second the comments about using position: absolute for page layout. It seems easier that way at first, but it’s basically a disaster for page layout in general. Preferably post a link to a live page so we can see what’s happening, and we can help you recode the page appropriately. :slight_smile: