positionnement CSS et HTML 3 colonnesFermé

Question

Bonjour, J'ai vraiment trouvé un casse tête que je n'arrive pas à résoudre... Mon problème est simple : je veux obtenir dans ma page un bloc centré de 900px (#page), qui contient 3 blocs de largeurs fixes : un central #content de largeur 490px, et un à gauche #menugauche, un à droite #menu droite de 170px chacun. ça paraît simple avec des float, mais ça ne l'est pas, puisque le div #page mesure du coup 0px de haut (ne contenant plus que des div flottant...). Comment faire ça proprement ?? voilà l'exemple en jpeg sur http://www.itch.fr/EXEMPLE.jpg Voici le code css : html, body{ margin: 0; padding: 0; text-align: center; } #page{ width: 900px; margin: 4em auto; } #menugauche{ float: left; margin: 110px 10px 0 0; padding: 5px; width: 170px; text-align: right; } #content{ float: left; width: 490px; margin: 0; padding: 15px; text-align: justify; } #menudroite{ padding: 5px; width: 170px; text-align: left; float: right; } et le html :

Merci d'avance

Darkito · Answer

Bonjour, 
Je ne vois pas ou est ton problème...
Pourquoi ne pas précisé une hauteur pour tes tests et une couleur de fond  pour identifier tes div.
De plus, je pense que dans ton cas, il serait mieux de mettre float : left pour menu droite car IE n'est pas trop copain avec les float...

-- 
Tøƒ

itch · Answer

Pour ce qui est de fixer des hauteurs pour mes tests, c'est fait puisqu'il ont du contenu, leurs propriétés height s'en retrouvent ajustées automatiquement. Le but du jeu c'est que cette balise #page suive le mouvement... , le contenu de #content étant modifié suivant les pages du site, #page devra s'adapter à sa taille. Mais avec des propriétés float sur toutes les div contenues dans #page, ce dernier ne s'ajuste pas et mesure 0px de haut. Je vérifie tout avec le DOM inspector de Firefox, donc pas besoin s'y mettre des couleurs pour faire mes tests. Tous les tutos que j'ai trouvé sur le web qui explique des constructions de pages à partir de 3 colonnes le font avec des colonnes qui font toutes la largeur de la page, et qui ne nécessitent pas d'être encadrées par un div centré de largeur fixe...

Darkito · Answer

Peut-être qu'il faut que tu "fermes" ton float. essaie d'ajouter la classe .Clear{ clear:both; } et d'insérer une div vide

juste après ton menu droit. As-tu tester sous IE pour l'histoire du float right ? -- Tøƒ

elburro · Answer

Centre est le bloc principale qui les contient tous aligner sur la gauche

div#centre {
width : 780px ;
float:left;
}

le bloc de gauche aligner a gauche

div#gauche {  
float:left;
width : 150px;
margin-right:0px;
background: #FFF;
}
le bloc de droite a droite 

div#nav {
float:right;
width : 25px;
margin-left: 5px;
background: #FFF;
}

et le contenu

div#cont1 {
background: #FFF;
}


Moi je place le cont1 après le bloc de droite dans mon Xhtml

Edmee · Answer

Cela fait un moment, mais eut toujours aider quelqu'un. Tous tes div doit être float:left (page, menugauche, content et menudroite). Il doit y avoir aussi un div clear après ton div page pour éviter que le contenu qui se trouve en dessous se mettent aussi à flotter. Ce div doit avoir ce css :.clear{clear:both; } et tu dois les diposer ainsi sur la page : P.S. Cette mise en page n'est bien sur pas valide en HTML, c'est jsute pour permettre de bien visualier la mise en page.

Positionnement CSS et HTML 3 colonnes

5 réponses

Discussions similaires

Newsletters