28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Liste de deux éléments côte à côtes

Bonjour,
Voilà mon problème, j'aimerais créer deux "box" l'un à coté de l'autre (en horizontal), chacun d'eux prenant 50% d'espace horizontal.

Pour ce faire, j'aurais eu tendance à utiliser une liste de cette manière :

<ul>
            <li>
            	<h4>Propriétaires</h4>
            	blablabla<br />
		blabla bla
            </li>
            <li>
            	<h4>Locataires</h4>
                blablabla<br />
		blablabla<br />
		blabla bla
            </li>
</ul>


Cependant, je n'arrive pas à pouvoir avoir ces deux parties l'une à coté de l'autre.
En utilisant des "float left" pour les li, lorsque j'écris du texte sous la liste celui-ci s'affiche à droite des deux "boites", et autre problème, mon background de fond de div (dans lequel est contenu la liste) ne descend pas avec la liste.

Je ne sais pas si je suis plus ou moins clair dans mes explications, c'est pas évident à expliquer Smiley langue

Le plus simple en fait serait d'utiliser un tableau mais bon, j'essaye d'éviter...

Merci d'avance si vous pouvez m'aider à résoudre ce problème
Modifié par pixelb (16 Jan 2010 - 15:11)
bon, j'arrive à quelque chose de pas mal mais je reviens plus ou moins aux tableaux... Smiley ravi
voilà ce que j'ai utilisé

ul.maclass{
	display:table;
	width: 520px;
}
ul.maclass li{
	display:table-cell;
	width:50%;
}
Salut,

Si tu veux deux listes côte à côte, il faut que tu créés deux liste différentes, et placer le ul en float (pas les li). 


<ul>
<li></li>
<li></li>
</ul>

<ul>
<li></li>
<li></li>
</ul>


Si tu ne veux qu'une liste et que les li s'affichent en ligne, utilise display:inline sur tes li.

Placer des <br /> pour la mise en forme n'est pas une bonne solution.

Je ne suis pas sûr que ce soit ce que tu cherches à faire exactement, n'hésite pas à poster un graphique explicatif.

A+
Sujet clos
Aller à