hum en fait c'est IE qui affiche pas comme les autres (pour moi idem entre Firefox, opera et safari (sous windows les 3), seul ie affiche le tous collé à gauche

ajoute des margin-left:0; pour le header et la page


@+

[quote="foetus69"]Merci Moogli, ca marche nickel sous IE et même avec le height à 100%.

Par contre sous Firefox, ca casse tout :([/quote]
Le design 3 colonnes tourne vite au casse-tête en CSS...

Je te conseille de chercher sur le net ("css 3cols" ou "css holy grail" qui plante bien le problème), il y a quelques solutions à étudier suivant tes besoins.

Merci Moogli, ca marche nickel sous IE et même avec le height à 100%.

Par contre sous Firefox, ca casse tout :(

#header
{
   background-color:#F00;
   width:990px;
   margin:0px auto;
   padding:0px;

}

#menu
{
   background-color:#EEE;
   width:100%;
   margin:0px auto;
   padding:0px;
}

#page
{
   background-color:#0C6;
   width:990px;
   margin:0px auto;
   padding:0px;

}

#gauche
{
   /*position:absolute;*/
   background-color:#1393ce;
   float:left;
   width:185px;
}

#centre
{
   /*position:absolute;*/
   background-color:#CC0;
   float:left;
   margin-left: 10px;
   width:600px;
}

#droite
{
   /*position:absolute;*/
   background-color:#1393ce;
   float:left;
   margin-left:10px;
   width:185px;
}

#clear
{
   clear:both;
}

#footer
{
   background-color:#CDE;
}

salut,

c'est le positionnement absolue qui met le brin, quand tu fait sur sort les bloc du flux, donc soit tu positionne aussi le footer en absolue.
soit tu les vire et les margin par la même occasion ;)

@+
[css]#header
{
background-color:#F00;
width:990px;
margin:0px auto;
padding:0px;

}

#menu
{
background-color:#EEE;
width:100%;
margin:0px auto;
padding:0px;
}

#page
{
background-color:#0C6;
width:990px;
margin:0px auto;
padding:0px;

}

#gauche
{
/*position:absolute;*/
background-color:#1393ce;
float:left;
width:185px;
}

#centre
{
/*position:absolute;*/
background-color:#CC0;
float:left;
margin-left: 10px;
width:600px;
}

#droite
{
/*position:absolute;*/
background-color:#1393ce;
float:left;
margin-left:10px;
width:185px;
}

#clear
{
clear:both;
}

#footer
{
background-color:#CDE;
}[/css]

	<div id="header">header</div>
    <div id="menu">menu</div>
    <div id="page">
    <div id="gauche">gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche </div>
    <div id="centre">centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre </div>
    <div id="droite">droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite </div>
    
    </div>
	<div id="clear"></div>
    <div id="footer">footer</div>

Bonjour,

Je suis presque arrivée à faire ce que je veux sauf que mon footer ne veut pas aller à la ligne et reste bloquer sous mes floats et ces derniers ne sont pas de la même hauteur.

Pouvez-vous m'aider à adapter mon code svp ?

[html] <div id="header">header</div>
<div id="menu">menu</div>
<div id="page">
<div id="gauche">gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche </div>
<div id="centre">centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre </div>
<div id="droite">droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite </div>

</div>
<div id="clear"></div>
<div id="footer">footer</div>[/html]

Ma css :

[code]#header
{
background-color:#F00;
width:990px;
margin:0px auto;
padding:0px;

}

#menu
{
background-color:#EEE;
width:100%;
margin:0px auto;
padding:0px;
}

#page
{
background-color:#0C6;
width:990px;
margin:0px auto;
padding:0px;

}

#gauche
{
position:absolute;
background-color:#1393ce;
float:left;
width:185px;
}

#centre
{
position:absolute;
background-color:#CC0;
float:left;
margin-left:195px;
width:600px;
}

#droite
{
position:absolute;
background-color:#1393ce;
float:left;
margin-left:805px;
width:185px;
}

#clear
{
clear:both;
}

#footer
{
background-color:#CDE;
}[/code]

Si vous voyez des âneries, n'hésitez pas :)