[Résolu] 2 colonnes sans float

Salut,

Existe-t-il un moyen efficace de créer 2 colonnes à l'intérieur d'une div sans float?

Bonjour,

Display table-cell.
Modifié par Laurie-Anne (19 Jul 2012 - 15:22)

Lire : Mise en page CSS avancée grâce à la propriété display

@laurie-anne :Tu veux dire table-cell?
merci à toi, je teste.

@patidou : oui je l'ai lu, j'avais oublié ce display. L'occasion de tester
Modifié par jmlapam (19 Jul 2012 - 13:30)

Sinon css3 multicolumn mais ne fonctionne pas partout.

Merci patidou mais en fait le table-cell me plait pas trop pour ce que j'ai à faire, je vais plutôt revenir à un inline-block

Pour display:inline-block;, fait attention aux espaces entre les balises (les espaces dans le code HTML). Ça peut créer des décalages différents suivant les navigateurs.

Exemple 1 (avec des espaces entre les balises) :

<span style="display:inline-block; width: 50%; background-color: red;"></span>                       <span style="display:inline-block; width: 50%; background-color: blue;"></span>

Les deux span sont une largeur de 50% mais le deuxième va s'afficher en dessous à cause des espaces entre les balises

Exemple 2 (Sans espace entre les balises) :

<span style="display:inline-block; width: 50%; background-color: red;"></span><span style="display:inline-block; width: 50%; background-color: blue;"></span>

Les deux span sont une largeur de 50% et ils vont s'afficher côte à côte.

Exemple 3 (Sans espace entre les balises mais avec un commentaire pour permettre un retour à la ligne et avoir un code plus lisible) :

<span style="display:inline-block; width: 50%; background-color: red;"></span><!--
 This commentary to prevent whitespace --><span style="display:inline-block; width: 50%; background-color: blue;"></span>

Les deux span sont une largeur de 50% et ils vont s'afficher cote à cote.



Je préfère le dire car j'ai presque fini à l'asile l'autre jour à cause de ce "bug" d'affichage.
Modifié par gaten (19 Jul 2012 - 14:35)

Oui, oui, table (c'est l'influence de mes collègues footeux ^^; )

@gaten : merci de ton retour mais moi j'ai une width en px