Positionnement CSS et HTML 3 colonnes

Fermé
itch
Messages postés
3
Date d'inscription
lundi 28 janvier 2008
Statut
Membre
Dernière intervention
30 décembre 2008
- 28 janv. 2008 à 16:11
 Edmee - 19 nov. 2010 à 20:45
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 :



<html>

<body>

<div id="page">



<div id="menugauche">



</div>



<div id="content">



</div>



<div id="menudroite">



</div>



</div>

</body>

</html>



Merci d'avance

5 réponses

Darkito
Messages postés
1190
Date d'inscription
vendredi 7 décembre 2007
Statut
Membre
Dernière intervention
26 mai 2010
547
28 janv. 2008 à 16:19
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øƒ
0
itch
Messages postés
3
Date d'inscription
lundi 28 janvier 2008
Statut
Membre
Dernière intervention
30 décembre 2008

28 janv. 2008 à 16:28
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...
0
Darkito
Messages postés
1190
Date d'inscription
vendredi 7 décembre 2007
Statut
Membre
Dernière intervention
26 mai 2010
547
28 janv. 2008 à 16:32
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 <div class="Clear"></div> juste après ton menu droit.

As-tu tester sous IE pour l'histoire du float right ?

--
Tøƒ
0
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
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 :
<page>
<menugauche> </menugauche>
<content> </content>
<menudroite> </menudroite>
</page>
<clear>

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