Bonjour,
Je créé actuellement un site avec le CMS Joomla et j'ai créé mon template pour celui-ci.
Ce template a été réalisé en CSS, et j'ai un problème d'alignement sur toutes mes pages...
Comme des photos valent mieux que des longs discours, voici ce que ça donne :

http://www.boostupload.com/files/image_338_espacement.jpg

Ce problème est survenu alors que je ne touchais pas du tout aux propriétés CSS de ce bloc de texte, et le résultat est le même sous Firefox et Internet Explorer...
Je vous joins mon CSS :

body {
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("../images/bois.jpg");
font-family: Arial, Verdana, "Arial Black", sans-serif;
font-size: 0.9em;
}

p {

}

td {
font-family: Arial, Verdana, "Arial Black", sans-serif;
font-size: 0.9em;
}

th {
font-family: Arial, Verdana, "Arial Black", sans-serif;
font-size: 0.9em;
}

a:link {
text-decoration: none;
color: #F16623;
font-weight: bold;
}

a:visited {
text-decoration: none;
color: #F16623;
font-weight: bold;
}

a:hover {
text-decoration: underline;
color: #8EC641;
font-weight: bold;
}

a:active {
text-decoration: none;
color: #8EC641;
font-weight: bold;
}

#complet {
width: 900px;
padding-top: 25px;
padding-left: 40px;
padding-bottom: 25px;
margin: 0px;
background-color: White;
}

#haut {
width: 850px;
height: 150px;
background-image: url("../images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#photos {
width: 850px;
height: 100px;
background-image: url("../images/banniere.jpg");
margin-bottom : 10px;
}

#gauche {
float: left;
width: 175px;
}

#centre {
float: left;
width: 480px;
margin: 10px;
}

#pathway {
float: left;
width: 380px;
text-align: left;
padding: 5px;
background-image: url("../images/bg-pathway.png");
background-repeat: repeat-x;
}

#date {
float: left;
text-align: left;
padding: 5px;
background-image: url("../images/bg-pathway.png");
background-repeat: repeat-x;
}

#presentation {
width: 470px;
margin-top: 35px;
}

#news {
width: 500px;
}

#droite {
float: left;
width: 175px;
text-align: center;
}

#footer {
clear: both;
width: 845px;
padding: 5px;
font-size: 0.8em;
font-family: Verdana, Arial, "Arial Black", sans-serif;
text-align: center;
border: 1px solid #57BF00;
background-image: url("../images/bg-footer.png");
background-repeat: repeat-x;
}

.contentheading{
color: #F16623;
font-size: medium;
font-family: Arial Black;
padding-bottom: 0px;
padding-top: 10px;
margin-bottom: -10%;
}

.contentpagetitle {
font-size: 15px;
font-weight: bold;
text-indent: -10%;
text-decoration: underline;
}

div.module div div div h3 {
color: #F16623;
font-family: Arial, Verdana, "Arial Black", sans-serif;
font-size: 1.1em;
}

div.module-menuprincipal h3 {
font: bold 13px Arial, Helvetica, sans-serif;
padding-top: 22px;
padding-left: 37px;
margin-bottom: 22px;
color: #F16623;
}
div.module-menuprincipal {
background: url(../images/inferieur_gauche_principal.png) bottom left no-repeat;
}

div.module-menuprincipal div {
background: url(../images/superieur_gauche.png) top left no-repeat;
}

div.module-menuprincipal div div{
background: url(../images/inferieur_droit_principal.png) bottom right no-repeat;
height: 422px;
margin-bottom: 20px;
}

div.module-menuprincipal div div div {
background: url(../images/superieur_droit.png) top right no-repeat;
}

a.mainlevel-menuprincipal {
display: block;
background-image :url(../images/boutons.png);
background-repeat:no-repeat;
font-size: 1.1em;
font-weight: bold;
color: white;
text-align: left;
text-indent: 30px;
text-decoration: none;
height: 20px;
padding-bottom: 10px;
padding-top: 13px;
}

a:hover.mainlevel-menuprincipal {
display: block;
background-image :url(../images/boutons.png);
background-repeat:no-repeat;
font-size: 1.1em;
font-weight: bold;
color: black;
text-align: left;
text-indent: 30px;
text-decoration: none;
height: 20px;
padding-bottom: 10px;
padding-top: 13px;
}

a:active.mainlevel-menuprincipal {
display: block;
background-image :url(../images/boutons.png);
background-repeat:no-repeat;
font-size: 1.1em;
font-weight: bold;
color: white;
text-align: left;
text-indent: 30px;
text-decoration: none;
height: 20px;
padding-bottom: 10px;
padding-top: 13px;
}

div.module-connexion h3 {
font: bold 13px Arial, Helvetica, sans-serif;
padding-top: 22px;
margin-bottom: 22px;
color: #F16623;
}
div.module-connexion {
background: url(../images/inferieur_gauche_connexion.png) bottom left no-repeat;
}

div.module-connexion div {
background: url(../images/superieur_gauche.png) top left no-repeat;
}

div.module-connexion div div{
background: url(../images/inferieur_droit_connexion.png) bottom right no-repeat;
height: 250px;
margin-bottom: 20px;
}

div.module-connexion div div div {
background: url(../images/superieur_droit.png) top right no-repeat;
}

div.module-connexion a {
text-decoration: none;
color: white;
}

div.module-connexion a:hover {
text-decoration: none;
color: black;
}

div.module-connexion a:active {
text-decoration: none;
color: white;
}

div.module-calendrier h3 {
font: bold 13px Arial, Helvetica, sans-serif;
padding-top: 22px;
margin-bottom: 22px;
color: #F16623;
}
div.module-calendrier {
background: url(../images/inferieur_gauche_calendrier.png) bottom left no-repeat;
}

div.module-calendrier div {
background: url(../images/superieur_gauche.png) top left no-repeat;
}

div.module-calendrier div div{
background: url(../images/inferieur_droit_calendrier.png) bottom right no-repeat;
height: 215px;
margin-bottom: 20px;
}

div.module-calendrier div div div {
background: url(../images/superieur_droit.png) top right no-repeat;
}

table.contenttoc {
margin-top: 10px;
margin-bottom: 10px;
}

.contenttoc {
font-size: 10px;
width: 470px;
text-align: center;
}

J'ai essayé d'appliquer des margin, padding en pixels et pourcentage, le seul qui a fonctionné est un margin en pourcentage qui réduit l'espacement, mais cela créé des superpositions de texte à certains endroits de mon site...
Si vous avez une idée, ou si vous souhaitez plus d'éléments, n'hésitez pas !
Merci d'avance ;)