28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Mise en forme CSS - 3 DIV cote à cote ...

Bonjour à vous tous et merci d'avance pour votre aide.
Ce que je souhaiterais faire c'est placer 3 DIV l'une à coté de l'autre.
Avec les particularité suivantes:

DIV centrale avec une width fixe est centré par rapport au viewport.
DIV droite et gauche qui occupe les parties vide du viewport.

J'ai essaye cela derniérement, mais sans résultat


#left {
	background-color: #300;
	height: 20px;
	width: 50%;
	float: left;
}
#right {
	background-color: #F00;
	height: 20px;
	width: 50%;
	float: left;
}
#center {
	background-color: #00F;
	height: 20px;
	width: 1004px;
	float: left;
}
body{
	margin: 0px;
	width: 100%;
}
-->
</style>
</head>

<body>
<div id="left">1</div>
<div id="center">2</div>
<div id="right">3</div>
</body>
</html>


Merci à vous.
Modifié par Rifton007 (01 Feb 2010 - 09:35)
Administrateur
Hello,

Rifton007 a écrit :
DIV centrale avec une width fixe est centré par rapport au viewport.
DIV droite et gauche qui occupe les parties vide du viewport.


Les schémas de positionnement hors flux (float, position absolute) nécessitent d'être dimensionnés, donc pour obtenir le résultat souhaité, il faut trouver un schéma dans le flux pour droite et gauche.
S'il n'y en avait qu'un, ce serait simple.
Là à priori, je ne vois que le schéma "display: table/table-cell" qui pourrait convenir, le problème étant son support encore risqué (pas reconnu par IE<8).
Du coup, si j'osais, je dirais... tableau HTML.
Bonjour,

Est-ce que les colonnes de gauche et droite vont accueillir du contenu ou juste de la décoration ?

SI c'est la seconde solution, la réponse se trouve ici.

Sinon, la solution de Raphaël est la seule qui me vienne à l'esprit. Il est également possible d'utiliser un tableau de présentation pour IE<8.
Oui voilà ça correspond parfaitement à ce que je cherche. (Sorry de ne pas l'avoir trouvé moi même)
Encore merci à vous deux, je vous souhaite une agréable journée.
Sujet clos
Aller à