Espace vide HTML

Bonjour à tous,

Je suis confronter à un problème que je n'arrive pas à résoudre, j'ai déjà effectuer une recherche préalable sur Google mais je n'ai rien trouvé.

Alors voilà j'ai un immense espace en bas de ma page entre le "bas du corps de ma page" et le "footer" : voir ScreenShot http://www.hostingpics.net/viewer.php?id=151902exemple.png

Apparement cela viens du fait que j'utilise pas mal la fonction "inline-block" sur mon css dont voici le contenu :

/* ------------------------------------------Polices------------------------------------------- */
@font-face {
font-family: 'jenna_sueregular';
src: url('polices/jennasue-webfont.eot');
src: url('polices/jennasue-webfont.eot?#iefix') format('embedded-opentype'),
url('polices/jennasue-webfont.woff') format('woff'),
url('polices/jennasue-webfont.ttf') format('truetype'),
url('polices/jennasue-webfont.svg#jenna_sueregular') format('svg');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'roughtypewriterregular';
src: url('polices/rough_typewriter-webfont.eot');
src: url('polices/rough_typewriter-webfont.eot?#iefix') format('embedded-opentype'),
url('polices/rough_typewriter-webfont.woff') format('woff'),
url('polices/rough_typewriter-webfont.ttf') format('truetype'),
url('polices/rough_typewriter-webfont.svg#roughtypewriterregular') format('svg');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'chunkfive_exregular';
src: url('polices/chunkfive_ex-webfont.eot');
src: url('polices/chunkfive_ex-webfont.eot?#iefix') format('embedded-opentype'),
url('polices/chunkfive_ex-webfont.woff') format('woff'),
url('polices/chunkfive_ex-webfont.ttf') format('truetype'),
url('polices/chunkfive_ex-webfont.svg#chunkfive_exregular') format('svg');
font-weight: normal;
font-style: normal;

}
/* ------------------------------------------Texte---------------------------------------------- */
#logo
{
font-family: 'jenna_sueregular';
font-size: 2em;
}
nav
{
font-family: 'roughtypewriterregular';
font-size: 0.8em;
}
p
{
font-family: 'roughtypewriterregular';
font-size: 1em;
color: white;
}
h2
{
font-family: 'chunkfive_exregular';
font-size: 3em;
color: white;
text-align: center;
}
mark
{
background-color: black;
color: white;
font-size: 1.25em;
}
em
{
background-color: white;
color: black;
font-style: normal;
}
#lire_suite
{
text-decoration: none;
color: black;
font-weight: bold;
}
#lire_suite:hover
{
color: white;
text-decoration: underline;
}

/* --------------------------------Mise en forme de la page----------------------------------- */
#bloc_page
{
width: 1000px;
margin: auto;
}
/*-------------------- -------------Barre de navigation-------------------------------------- */
#haut_de_page
{
background-image: url('header.png');
}
#haut_de_page header
{
width: 1000px;
margin: auto;
position: relative;
}

#haut_de_page nav a:link
{
text-decoration:none;
}
#haut_de_page nav ul
{
list-style-type: none;
}
#haut_de_page nav
{
display: inline-block;
width: 1045px;
margin: auto;
position: relative;
bottom: 19px;
right: 40px;
vertical-align: top;

}
#haut_de_page nav li
{
display: inline-block;
margin-right: 0px;
}
#haut_de_page nav a
{
font-size: 1.1em;
}
#haut_de_page li {
float:left; /*pour IE*/
}
#haut_de_page nav ul li a
{
display: block;
width: 166px;
text-align: center;
line-height: 30px;
background: url(bouton.png) repeat-x;
color:white;
}
#haut_de_page nav ul li a:hover
{
background: url(bouton1.png) repeat-x;
color: white;
}
/* ----------------------------------------------Fond du site-------------------------------------------- */
body
{
background-image: url('background1.png');
background-repeat: repeat;

}

/*-------------------------------------------Accueil------------------------------------------------------*/
#costard
{
display: inline-block;
padding: 75px 50px 50px 50px;
}
h1
{
font-family: 'jenna_sueregular';
font-size: 8em;
color: white;
display: inline-block;
position: relative;
bottom: 435px;
left: 50px;
}
#info
{
position: relative;
background-image: url('cadre_info.png');
padding: 30px 15px 15px 50px;
width: 500px;
bottom: 500px;
left: 310px;
}
#info a:link
{
text-decoration: none;
}
#info a, #info ul
{
color: white;
}
#info ul
{
font-size: 1.0em;
font-family: 'roughtypewriterregular';
line-height: 30px;
}
/* ------------------------------------------ Corps de la page --------------------------------------------------- */
#corps_page
{
position: relative;
bottom: 400px;
}
/*--------Mon Histoire-------*/
#cadre_mon_histoire
{
background-image: url('cadre_info.png');
width: 500px;
padding: 50px 30px 30px 50px;
line-height: 30px;
}
#logo_histoire
{
display: inline-block;
position: relative;
left: 625px;
bottom: 460px;
}
#crayon
{
display: inline-block;

}
/*--------Mes experiences-------*/
#block_mes_experiences
{
position: relative;
bottom: 400px;
}
#cadre_mes_experiences
{
display: inline-block;
background-image: url('cadre_info.png');
width: 480px;
position: relative;
left: 35px;
bottom: 30px;
padding: 50px 30px 20px 70px;
line-height: 30px;
font-family: 'roughtypewriterregular';
color: white;
}
#entreprise
{
position: relative;
}
/*--------Mes compétences-------*/
#block_mes_competences
{
position: relative;
bottom: 400px;
}
#cadre_mes_competences
{
display: inline-block;
background-image: url('cadre_info.png');
width: 480px;
position: relative;
padding: 50px 30px 30px 70px;
line-height: 30px;
font-family: 'roughtypewriterregular';
color: white;
}
#competences
{
display: inline-block;
position: relative;
left: 630px;
bottom: 480px;
}
/*--------Mon projet-------*/
#block_mon_projet
{
position: relative;
bottom: 800px;
}
#cadre_mon_projet
{
display: inline-block;
background-image: url('cadre_info.png');
width: 480px;
position: relative;
padding: 50px 30px 30px 70px;
line-height: 30px;
font-family: 'roughtypewriterregular';
color: white;
}
/* -------------------------------------------Footer-----------------------------------------------------*/
html, body, #wrap
{height: 100%;}

body > #wrap
{height: auto; min-height: 100%;}

#main
{padding-bottom: 50px;} /* must be same height as the footer */

#footer
{
position: relative;
margin-top: -50px; /* negative value of footer height */
height: 50px;
clear:both;
background-image: url('footer.png');
}
#bas_de_page1
{
width: 1000px;
margin: auto;
position: relative;
top: 15px;
}
#bas_de_page2
{
width: 1000px;
margin: auto;
position: relative;
left: 750px;
bottom: 10px;
}

Quelles solutions existent pour remédier à cela?

Merci d'avance pour vos réponses.