Probleme DIV CSS float

Question

Bonjour,

Je souhaite créer une page avec plusieurs DIV suivies et/ou imbriquées :
1 div header
1 div menu (horizontale sous le header)
1 div principale (main) sur 100% de la largeur du body avec :
- 2 colonnes (2 div) qui se partagent le main
1 div (bas) en bas du main sur 100% de la largeur du body pour contenir une image de fin de page
1 div pied de page (footer) pour le copyright

Mon problème est que si je ne fixe pas de hauteur à mon main (ce que je veux surtout pas), la partie "bas" se colle n'importe où.
Pour info, j'ai un fond (derrière le main) à mettre et qui doit se prolonger en fonction de la longueur de la colonne gauche qui est dans ce main.

Voici mon CSS; quelqu'un peut-il me dire ce qui cloche ? Merci beaucoup par avance de votre aide.

body {width:935px;margin:0 auto;
}

#header {height:408px; background-image:url(img/fondheader.jpg); background-repeat:no-repeat;
}

#menu {height:100px;background-color:#CC0000;
}

#main {width:100%;background-image:url(img/fondcontent.gif); background-repeat:no-repeat;
}

#mainleft {float:left; width:60%;
}

#mainright { float:right;width:40%;
}

#bas {height:100px;background-image:url(img/fondcontent_bas.gif); background-repeat:no-repeat;
}

#footer { height:60px;background-color:#CCCCCC;
}

Mon fichier html est simple :

<body>

<div id="header">
</div>

<div id="menu">
c'est le menu
</div>

<div id="main">

<div id="mainleft">partie gauche de la partie principale</div>

<div id="mainright">partie droite de la partie principale</div>

</div>

<div id="bas">c'est le bas</div>

<div id="footer">
c'est le pied de page
</div>

</body>

Afficher la suite

partie gauche de la partie principale

partie droite de la partie principale

c'est le bas

Sahi · Answer

Tu as oublié Clear: both, dans le bas et/ou footer

Probleme DIV CSS float

1 réponse

Votre réponse

Discussions similaires