[résolu]Probléme de mise en page CSS avec un portail php

je sais qu'ici on fait du HTML/CSS et j'en comprend et saisi toutes les potentialité même si je suis trés loin de les maitriser... mais j'ai un souci avec mon site que j'ai construit avec un portail php (pwsphp) afin de pouvoir plus rapidement le mettre à jour, ce site étant destiné à un but purement informatif.
donc évidemment, ce n'est pas moi qui ait fait le théme et je rencontre d'assez gros probléme avec, ayant voulu rajouté ue colonne a droite, sous firefox (évidemment celui-ci étant plus strict et respectant a peu prés les standards), j'ai déja posté sur pas mal de site, mais je n'ai trouvé personne d'assez compétent en CSS pour résoudre le probléme, donc voici, l'url de mon site , pour que vous puissiez constatez le probléme de présentation : colonne du centre décalé à gauche et colonne de droite en bas et dehors de la page...

donc, sinon, voici ma feuille de style :

/* Général
******************************************/
* { padding: 0; margin: 0; border: 0px none; }

body{
	padding: 0;
	margin: 0;
	background: #fff;
	text-align: center; font-style:normal;
	font-variant:normal;
	font-weight:normal;
        font-size: 0.8em;
        font-family:Tahoma, sans-serif;
}




/* Liens
******************************************/
a:link{color:#000; background:transparent;}
a:visited{color:#000; background:transparent;}
a:hover{color:#000; background:transparent;}
a img {border:none; text-decoration: none;}

/* Titres
******************************************/
h1, h2, h3, h4, h5{font-family: "Trebuchet MS", sans-serif;}
h1 a, h2 a, h3 a, h4 a, h5 a{text-decoration: none;}
h2{font-size: 1.2em; margin: 1em 0;}
h3{font-size: 1em; margin: 0.8em 0;}
h4{font-size: 1em; font-weight: normal}

/* Tableau
******************************************/
table { font-size: 1em; }
textarea { width:100%; }

/* Entete
******************************************/
#top{
	height: 150px;
	width: 100%;
	font-size: 1em;

}

#top h1{
	font-size: 1em;
	background: #000000 url('../img/poolite_logo.gif');
	width: 899px;
	height: 150px;
	margin: 0 auto;
	position: relative;
}

#top h1 a{
	color: #CC3300;
	text-decoration: none;
	text-align: left;
	line-height: 93px;
        display: block;
	position: absolute;
	width: 300px;
	height: 150px;
	left: 0px;
	top: 0px;
}

/* Page
******************************************/
#page{
	text-align: left;
	background: #FFF;
	width: 937px;
       	margin-left:auto;
	margin-right: auto;
        background-image:url(../img/fond.jpg);
}

#main	{
	height:100%;
	background-color:#fff;
	margin-left:19px;
	margin-right:19px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}


#date {
	font-size: 10px;
        color: #fff;
	background: transparent;
	text-align: center;
	margin: 0;
	position: absolute;
	top: 5px;
	left: 50%;
	margin-left: 300px;
}

#welcome_msg {
	width:160px;
        font-size: 10px;
        color: #777;
	background: transparent;
	text-align: right;
	margin: 0;
	position: absolute;
	top: 155px;
	left: 50%;
	margin-left: 280px;
}

#welcome_msg a{
	color: #777;
	background: transparent;
	text-decoration:none;
}

#welcome_msg a:hover{
	color: #F17F29;
	background: transparent;
}

/* menu
******************************************/
#menu{
        font-size: 1em;
	background: #000000 url('../img/menu_background.gif');
	background-repeat: repeat-x;
	width: 899px;
	height: 22px;
	margin: 0 auto;
        text-align: center;
        color: #64634B;
        font-weight:700;
        text-align: center;
}


#menu li {
	display: block;
	float: left;
	height: 20px;
	width: auto;
	margin-left: 8px;
}


#menu li a {
	text-decoration: none;
	color: #64634B;
	background-image: url("../img/fleche.gif");
	background-repeat: no-repeat;
	padding-left: 15px;
}

#menu li a:visited {
	border:0 none;
}

#menu li a:hover {
	text-decoration: underline;
}


/* Colonne
******************************************/
#sidebar	{
	float:left;
	width: 100px;
	margin-top:5px;
	padding-bottom:10px;
	text-align:left;
	clear:both;
}

#sidebar h2{
	margin-top:3px;
	margin-bottom:0px;
        padding-left: 25px;
       	background-image: url("../img/puce.gif");
        background-repeat: no-repeat;
        color: #64634B;
        border-bottom: 1px solid;
        border-color: #ccc;
}

#sidebar form input, #sidebar form textarea{
	border: 1px solid #999;
	-moz-border-radius: 4px;
}
#sidebar form input:focus, #sidebar form textarea:focus{
	border-color: #F17F29;
}

/* Colonne 2
******************************************/
#sidebar2	{
	float:right;
	width: 100px;
	margin-top:5px;
	padding-bottom:10px;
	text-align:left;
	clear:both;
}

#sidebar2 h2{
	margin-top:3px;
	margin-bottom:0px;
        padding-left: 25px;
       	background-image: url("../img/puce.gif");
        background-repeat: no-repeat;
        color: #64634B;
        border-bottom: 1px solid;
        border-color: #ccc;
}

#sidebar2 form input, #sidebar form textarea{
	border: 1px solid #999;
	-moz-border-radius: 4px;
}
#sidebar2 form input:focus, #sidebar form textarea:focus{
	border-color: #F17F29;
}


/* Bloc
******************************************/
.bloc	{
        width: 155px;
	background-color:#F2F3F4;
	text-align:left;
	padding-left:10px;
        padding-right:10px;
        padding-bottom:10px;
        margin-bottom:10px;
	margin-left:0px;
	margin-right:0px;
        border-style:solid;
	border-width:1px;
	border-color:#B9B9B9;
}



.bloc a {
        color:#64634B;
        text-decoration:none;
        padding-left: 10px;
}


.bloc a:hover{
        /*font-weight: bold ;*/
        background-image: url("../img/fond_over.gif");
        background-repeat: repeat-y;
        border-color: #B9B9B9;
        border-bottom: 1px solid;
}

.bloc2	{
	background-color:#F2F3F4;
	text-align:left;
	padding-left:10px;
        padding-right:10px;
        padding-bottom:10px;
        margin-bottom:10px;
	margin-left:0px;
	margin-right:0px;
        border-style:solid;
	border-width:1px;
	border-color:#B9B9B9;
}



.bloc2 a {
        color:#64634B;
        text-decoration:none;
}


.bloc2 a:hover {
        /*font-weight: bold ;*/
        background-repeat: repeat-y;
        border-color: #B9B9B9;
        border-bottom: 1px solid;
}

/* Contenu
******************************************/
#content {
	float:left;
	width: 520px;
	text-align:left;
	margin-top:5px;
	margin-bottom:5px;
	padding:0px;
	color : #555;

}

#content h2{
	margin-top:3px;
	margin-bottom:0px;
        background-repeat: no-repeat;

}

#footer	{
	border-top: 1px solid;
	border-bottom: 1px solid;
	text-align: center;
	font-family: arial;
	font-size: 11px;
	background-color: #B8D53D;
	margin-left: 19px;
	margin-right:18px;
	padding-top: 10px;
	padding-bottom:1 0px;
	clear:both;
}

#content form input, #content form textarea{
	border: 1px solid #999;
	-moz-border-radius: 4px;
}

#content form input:focus, #content form textarea:focus{
	border-color: #F17F29;
}

#content ul{
	padding-left:40px;
}

#content li{
	list-style-image: url(../img/li.png);
}


/* Contenu
******************************************/
#content2 {
	float:left;
	width: 700px;
	text-align:left;
	margin-top:5px;
	margin-bottom:5px;
	padding:0px;
	color : #555;

}

#content2 h2{
	margin-top:3px;
	margin-bottom:0px;
        background-repeat: no-repeat;

}

#footer2	{
	border-top: 1px solid;
	border-bottom: 1px solid;
	text-align: center;
	font-family: arial;
	font-size: 11px;
	background-color: #B8D53D;
	margin-left: 19px;
	margin-right:18px;
	padding-top: 10px;
	padding-bottom:10px;
	clear:both;
}

#content2 form input, #content2 form textarea{
	border: 1px solid #999;
	-moz-border-radius: 4px;
}

#content2 form input:focus, #content2 form textarea:focus{
	border-color: #F17F29;
}

#content2 ul{
	padding-left:40px;
}

#content2 li{
	list-style-image: url(../img/li.png);
}

#marge {
	float:left;
	width:2.5px;
}

/* Elements divers du skin
******************************************/

.edito {
	background-color:#F8F6F7;
	text-align:left;
	margin-top:0px;
	margin-bottom:5px;
	border-style:dashed;
	border-width:1px;
	border-color:#A0A0A0;
        padding:10px;

}

.edito a:hover{
	color: #F17F29;
}


.titre_right{
	margin-top:3px;
	margin-bottom:0px;
        padding-left: 25px;
        background-repeat: no-repeat;
        color: #F17F29;
        text-align:right;
}

.table {
	background-color:#FaFaFa;
	text-align:left;
	margin-top:0px;
	margin-bottom:5px;
	border-style:dashed;
	border-width:1px;
	border-color:#A0A0A0;
        padding:10px;

}

.table h2 {
        background-image: url("../img/h2.png");
        padding-left: 20px;
        font-size: 1.1em;
}
.table a {
        color: #E67B2A;
}

.news {
	border-bottom: 1px solid #A0A0A0;
	padding: 10px;
}

.news-title {
	font-size: 1.2em;
	margin: 1em 0;
}

.news-title a{
	color: #F17F29;
}

.news-title a:hover{
	color: #999;
}

.news-content a:hover{
	text-decoration:underline;
        color: #999;
}

.news-info {
	font-size: 0.7em;
	color: #979797;
}

.left{
	float: left;
	margin: 0 1em 1em 1em;
}

.quote {
	border: 1px dashed #B9B9B9;
	padding: 5px;

}

sinon, mon théme tout entier est en téléchargement ici si vous pensez que la feuille de style de suffit pas à régler le probléme.

j'ai beau avoir bidouiller de part et d'autre rien ni fait et cela est assez génant.

je vous remercie d'avance.
Modifié par poilue (03 Apr 2006 - 15:52)

Hello,

Tout d'abord, tu as oublié de mettre le lien de ton site dans ton message .

Ensuite, pour ton problème de mise en page, je te conseille de faire un petit tour du côté des tutoriaux et notamment celui-ci. Tu trouveras peut etre réponse à ton problème.

En regardant un peu ta feuille de style, je pense que le problème vient du positionnement flottant de tes éléments. En effet, je ne pense pas qu'il soit utile de positionner le bloc #content en float: left. Il te suffit juste de le laisser se positionner normalement et de lui attribuer des marges gauche et droite égales à la largeur de tes menus.

J'éspère que cela t'aidera. Bonne continuation .

merci beaucoup, je crois que je vais enfin comprendre comme ca fonctionne le positionnement en CSS , j'ai commencé a faire de petites modifications, on moins mon édito peut être centrer ! mais il me reste beaucoupà faire, donc si quelqu'un à du temps à perdre un coup de pouce serait le bienvenu

PS : j'ai bien mis mon site en lien cette fois-ci...

j'ai réussi à abtenir un équilibre précaire en trichant et en positionant ma colonne de droite en position absolute car sinon celle-ci ne s'intégrait vraiment pas en float right...
donc pour l'instant l eseul souci que je rencontre, reste une mise en page qui disparait sous IE si je grossi ma taille d'affichage, sinon tout fonctionne correctement, enfin, je crois...