2 colonnes fluides avec 1 gouttière fixe entre les 2

Bonjour,

J'ai fait 2 colonnes fluides comme ça:

#colonneGauche{
    width:50%;
    background-color:#DDDDDD;
    float:left;
}
#colonneDroite{
    width:50%;
    background-color:#DDDDDD;
    float:left;
}

et je voudrais qu'entre les 2 colonnes il y est une gouttière de 20px,

en rajoutant des marges droite et gauche de 10px au colonnes ça ne marche pas parce que les colonnes deviennent plus grandes que 50%

en mettant par ex width 45% et margin-right et left à 5% ça fait une gouttière mais du coup elle n'est pas fixe

comment faire ?

ps : je voudrais que la solution marche aussi avec plus de colonnes
Modifié par 3akycka (02 Oct 2011 - 21:48)

...j'ai trouvé une solution, en mettant un 2ème div à l’intérieur de chaque colonnes, et ce sont ces div qui ont des marges droite et gauche.

Est-ce que c'est une solution correcte, ou il y a mieux, notamment sans rajouter de divs ?

3akycka a écrit :
Est-ce que c'est une solution correcte, ou il y a mieux, notamment sans rajouter de divs ?

C'est une solution correcte, mais si tu veux un peu mieux:
- Tu peux utiliser display:table-cell plutôt que float:left. À partir de là, tu peux rajouter du padding sur tes colonnes (padding-right de 5px sur la première et padding-left de 5px sur la seconde, par exemple). Attention, display:table-cell n'est pas compatible avec IE7.
- Tu peux utiliser box-sizing:border-box pour que le padding ou éventuellement les border rajoutés aux éléments soient compris dans la largeur définie (50%) plutôt qu'ajoutés. Pour Firefox et Webkit il faudra utiliser les préfixes qui vont bien. Pas compatible avec IE7. Voir ce tableau de compatibilité.
- Enfin tu peux voir du côté du module Multi-column Layout mais l'implémentation dans IE est, comment dire... bah pas encore là.

Bonjour,

Merci pour ta réponse !
Du coup je vais garder la solution d'un 2ème div pour que ça reste compatible avec ie7.
Je ne connaissais pas box-sizing:border-box, c'est bien, je me demandais d’ailleurs pourquoi le padding et border n'étaient pas compris dans la largeur du box, ça semblerait plus logique que ça soit par defaut...

Il me semble que ie gérait la largeur des box comme box-sizing:border-box, à part si on a une dtd xhtml, c'est bizarre qu'on ne puisse pas basculer sur ce comportement dans ie alors qu'il sait le faire ?

3akycka a écrit :
Il me semble que ie gérait la largeur des box comme box-sizing:border-box

IE 5, oui.
IE 6 implémentait le modèle de boite CSS 2 (donc équivalent à box-sizing:content-box), sauf bien sûr pour les pages en mode Quirks qui utilisent un mode de rendu proche d'IE 5.5.

3akycka a écrit :
c'est bizarre qu'on ne puisse pas basculer sur ce comportement dans ie alors qu'il sait le faire ?

- IE6 sait basculer entre le mode de rendu IE6 et le mode de rendu IE5.5.
- IE7 sait basculer entre le mode de rendu IE7 et le mode de rendu IE5.5.
- IE8 sait basculer entre le mode de rendu IE8, un mode de compatibilité qui immite plus ou moins bien IE7, et le mode de rendu IE5.5. La propriété box-sizing n'est disponible qu'en mode de rendu IE8.

Le Doctype switching est un mécanisme assez large et les navigateurs ne permettent pas de choisir au cas par cas quel comportement adopter pour une chose précise. Et encore heureux, ça serait un joyeux bordel autrement! (Un cauchemar à implémenter dans les navigateurs, et un cauchemar à débuguer.)