Forum d'entraide PHPFrance

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 ?

	<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>

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

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

@+

#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;
}

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

Par contre sous Firefox, ca casse tout

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

Par contre sous Firefox, ca casse tout

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.

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


@+