Hi,

I have some extra space at the bottom of a page I am re-designing (I'm not too well versed in CSS). Can someone please take a look at this code and tell me how I can get rid of the excess? Also, any suggestions on cleaning up the CSS would be greatly appreciated. Thanks!

<style type="text/css">

body {
background: #400000;
font: 78%/1.5 arial, helvetica, serif;
text-align: center;
padding: 0;
margin: 1em;
height:500px;
}

#container {
width: 740px;
text-align: center;
margin: 0 auto;
}

#header {
position: relative;
left: 0px;
top: 0px;
}

#mainimage {
position: relative;
left: 258px;
top: -171px;
}

#smallimages {
position: relative;
left: 487px;
top: -354px;
}

#tabbedcontent {
position: relative;
top: -26em;
left: 22em;
}

#footer{
position: relative;
top: -51em;
left: 0em;
}

#backimage{
position: relative;
top: -51.0em;
z-index: -1;
text-align: center;
left: -10px;
}

#leftnav{
position: relative;
top: 160px;
left: -277px;
}

</style>

You're using relative positioning. Relative positioning simply takes an element and moves it to another area. The original area which is unused takes up white space.

My suggestion to you would be to look up how to use floats instead. Relative positioning is only meant for shifting things around when you don't want them to appear where they end up.

http://css.maxdesign.com.au/floatutorial/

It would be ok to use position: relative on your #container, but it is not necessary for everything else. There simply is no need to position every element.

Top, Left and z-index ONLY work with absolute positioning. You should be using margins and padding for your elements.

remove the height of the body