[Résolu] 3 colonnes avec largeurs en pourcentage

Bonjour.

J'ai un soucis avec une mise en page sur 3 colonnes avec des largeurs en pourcentage. A la base, le CSS ci-dessous fonctionne :

#content{
	background-color: #F2F2C1;
	overflow: hidden;
	float: left;
	margin: 0;
	padding: 0;
	width: 60%;
}

#sidebar-left {
    background-color: #DDEFC9;
    float: left;
   	margin: 0;
	padding: 0;
	width: 20%;
}

#sidebar-right {
    background-color: #C9EAEF;
    float: right;
    margin: 0;
	padding: 0;
	width: 20%;
}

Mais si je définis une valeur de padding (je voudrais 5 pixels à gauche et à droite dans chaque container), la sidebar-right reste bien à droite mais se place en-dessous du content. Pour le moment, j'ai réduit le width à 15% pour chaque sidebar. Ca remet la sidebar-right à sa place mais le content n'est plus centré. Comment faire...

Merci.

Bonjour,
Il faut intégrer le padding dans les boites en ajoutant la règle box-sizing:border-box.

Mais plutôt que des éléments flottants j'aurais mis un display:table + table-layout:fixed sur l'élément parent des colonnes.

Pour plus d'infos sur ces propriétés je vous laisse consulter les spécifications.

Le display table/table-cell a un atout majeur pour la structuration CSS des pages, permettant de donner la même hauteur aux siblings en table-cell.

Si tu as l'occasion d'essayer, je le conseille vivement. Cela offre une alternative plus que convaincante.
Modifié par Nigel (29 Sep 2015 - 10:42)