2 Div (2 colonnes) l'une a coté de l'autre... problème sous IE6

Bonjour,

Je suis en train de mettre en place mon blog, et sous IE j'ai un problème avec mes colonnes : http://www.kickandblog.com

Il y a une div #main qui contient une div #content à gauche et une div #sidebar à droite.
Sous Firefox tout se passe bien les deux colonnes sont parfaites, mais sous IE, la colonne de droite est complètement décaler en bas...

Voilà mon CSS layout.css

html, body, #page, #top, #prelude, #wrapper, #footer,
#main, #content,
#sidebar, #blognav, #blogextra {
	margin : 0;
	padding : 0;
	}

/* --------------------------------------------------------------
	CENTRAGE DE LA PAGE DANS LA FENETRE DU NAVIGATEUR.
	(supprimer ces lignes si on ne veut pas centrer)
	Note : on peut remplacer la valeur (ici 0) des marges au-dessus 
	et en dessous de la page par la valeur de son choix (px ou em).
--------------------------------------------------------------- */
body {
	text-align : center;
	}
#page {
	margin : 0 auto;
	text-align : left;
	width : 900px;
    }
#top {
	height : 105px; /* a modifier par la valeur de votre choix */
	}
/*#top h1 {
	margin : 0;
	padding : 0;
	height : 105px;*/ /* idem que pour #top */
	/*} */
.headerimg {
	position: absolute;
	margin-top: -90px;
	margin-left: 90px;
	}
#wrapper {
	margin : 0 10px;
	}

#main {
	width : 100%;
	margin : 0 -320px 0 0;
	float : left;
	}

/*MA COLONNE DE GAUCHE*/
#content {
	margin : 0 330px 0 0;
	padding : 10px;
	float : left;
	}

/*MA COLONNE DE DROITE*/

#sidebar {
	width : 320px;
	float : right;
	}

/*Mes deux colonnes situées dans #sidebar */

#blognav {
	width : 146px;
	float : left;
	margin : 0;
	padding : 0 6px;
	overflow:hidden;
	}
#blogextra {
	width : 146px;
	margin : 0;
	padding : 0 6px;
	float : right;
	overflow:hidden;
	}

/*FOOTER */

#footer {
	clear : both;
	text-align:center;
	height : 30px;
	}

J'espère que vous pourrez m'aider ? Merci beaucoup !

PS : j'ai pas tester sous IE7 ?
Modifié par BriKo (25 Jul 2007 - 09:36)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

J'ai modifier mon message. Désolé pour le message d'origine...

Je te remercie,

Brice

Heu... c'est d'origine le code suivant?

#main {
	width : 100%;
	margin : 0 -320px 0 0;
	float : left;
	}
#sidebar {
	width : 30px;
	float : left;
	}

Parce que là c'est quand même un peu du grand n'importe quoi...
Une marge négative à droite de 320px? Une largeur de 30px?

Règle générale avec les flottants: éviter de faire se chevaucher ou même se toucher les différents éléments.
Et aussi: pour mettre deux éléments côte-à-côte, on n'a besoin que d'un seul flottant (le premier des deux éléments dans le code HTML).

Pour le reste, je te renvoie aux tutoriels sur le positionnement CSS et les colonnes flottantes. Il serait pas mal de remettre à plat cette construction tarabiscotée.

Florent V. a écrit :
Heu... c'est d'origine le code suivant?

#main {
	width : 100%;
	margin : 0 -320px 0 0;
	float : left;
	}
#sidebar {
	width : 30px;
	float : left;
	}

Parce que là c'est quand même un peu du grand n'importe quoi...
Une marge négative à droite de 320px? Une largeur de 30px?

Règle générale avec les flottants: éviter de faire se chevaucher ou même se toucher les différents éléments.
Et aussi: pour mettre deux éléments côte-à-côte, on n'a besoin que d'un seul flottant (le premier des deux éléments dans le code HTML).

Pour le reste, je te renvoie aux tutoriels sur le positionnement CSS et les colonnes flottantes. Il serait pas mal de remettre à plat cette construction tarabiscotée.

Oups... le code d'origine est celui ci :

#main {
	width : 100%;
	margin : 0 -320px 0 0;
	float : left;
	}

#sidebar {
	width : 320px;
	float : right;
	}

Mais je ne comprend pas ce -320px... Je l'ai mis à 0... et la colonne de droite est descendu sur Firefox et IE...

Voilà comment ce construit ma page...

<div id="page">

	<div id="wrapper">
	
		<div id="main">
		
			<!-- MON MENU -->
				<div id="navcontainer">
				</div>
				
			<div id="content">
			
				<!-- LE BILLET -->
				    <div class="post">
					</div><!-- End #post-->
	    
			</div> <!-- End #content-->
		
		</div> <!-- End #main -->

		<div id="sidebar">

		  <div id="blognav">
		  </div>
		  
		 <div id="blogextra">
		    {{tpl:Widgets type="extra"}}
		  </div>
		</div> <!-- End #sidebar -->

	</div> <!-- End #wrapper -->

</div> <!-- End #page -->

Avec la même structure:

div#main {
float: left;
width: 550px;
}
div#content {margin: 0;}
div#sidebar {
margin-left: 560px;
}

Il y aura peut-être des petites choses à corriger pour que ça passe bien.

Florent V. a écrit :
Avec la même structure:

div#main {
float: left;
width: 550px;
}
div#content {margin: 0;}
div#sidebar {
margin-left: 560px;
}

Il y aura peut-être des petites choses à corriger pour que ça passe bien.

Nickel sous Firefox... mais IE6 déconne encore
Merci pour cette proposition en tout cas !

BriKo a écrit :
Nickel sous Firefox... mais IE6 déconne encore

Garde tout de même cette mise en page là, qui sera une meilleure base pour corriger les bugs d'IE que les styles actuels.
Edit: penses aussi à valider le code HTML. On dirait que tu as une erreur d'imbrication...
Modifié par Florent V. (25 Jul 2007 - 11:18)