Rechercher : dans
Par :

Probleme DIV CSS float

julius22, le 4 jun 2009 à 11:01:43 
 Signaler ce message aux modérateurs

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>

Configuration: XP Pro, Dreamweaver CS3, Photoshop CS3, IE7, FX3

Meilleures réponses pour « Probleme DIV CSS float » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Créer une DIV avec transparence VoirLes DIV transparents en CSS Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes : Rendre le DIV ainsi que le contenu transparent Le div lui même sera transparent, mais aussi...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...