[CSS ou xHTML] Design découpé marche à moitié

Il me reste un tout petit problème, le côté de droite ne veut pas se mettre à droite même s'il a un float: right;. Je vous donne mon code.
Mais avant, voici ce que ça donne: https://2img.net/r/ihimizer/img264/1056/designbugdv9.png

Code avant après le logo (donc en haut du menu et du corps)

Code : HTML

<div id="page">
<div class="hd"></div><div class="h"></div><div class="hg"></div><div class="g"><div class="d">

Code après tout tout tout, donc après le pied de la page

Code : HTML

</div></div>
<div class="bd"></div><div class="b"></div><div class="bg"></div>
</div>

Et le css en rapport avec le design

Code : CSS

.hg
{
background-image: url("images/coin_hg.PNG");
background-repeat: none;
width: 141px;
height: 145px;
}
.hd
{
background-image: url("images/coin_hd.PNG");
background-repeat: none;
width: 141px;
height: 145px;
float: right;
}
.bg
{
background-image: url("images/coin_bg.PNG");
background-repeat: none;
width: 144px;
height: 104px;
}
.bd
{
background-image: url("images/coin_bd.PNG");
background-repeat: none;
width: 144px;
height: 104px;
float: right;
}
.h
{
background-image: url("images/haut.PNG");
background-repeat: repeat-x;
}
.b
{
background-image: url("images/bas.PNG");
background-repeat: repeat-x;
}
.g
{
background-image: url("images/gauche.PNG");
float: left;
background-repeat: repeat-y;
}
.d
{
background-image: url("images/droite.PNG");
float: right;
background-repeat: repeat-y;
}
#page
{
/*background-color: #0083ff;*/
background-image: url("images/milieu.PNG");
}

Les images ressemblent à ça:
https://2img.net/r/ihimizer/img111/5739/imagesdesignjq9.png

bon... on dirait que les balises codes marchent pas XD je pourrais t'aider mais il me faut le code HTML ^_^" sinon, si les float marchent pas, essaie avec les text-align mais ça dépend des balises que tu utilises...