CSS pour faire 2 zones de contenu de colonne

Question

J'essaie d'éviter d'utiliser des tables pour former la mise en page de mon contenu, et je peux penser à deux alternatives que j'aimerais mieux apprendre: (1) éléments de la liste de style être côte à côte, et (2) utiliser des blocs div qui flottent sur la même ligne. Les deux auraient leurs propres utilisations pour ce sur quoi je travaille.

Je suis déjà en train d'utiliser des balises div pour former la mise en page entière de mon modèle à trois colonnes, mais ce que je dois faire maintenant est un peu différent. Dans le cas où cela aide, mon projet peut être trouvé here.

En bref, voici ma question; comment est-ce que je dirais un div de sorte que la largeur de lui soit 50% de la largeur de la zone qu'il occupe, plutôt que 50% de la largeur de la page? En ce qui concerne mon autre question, quelle serait la meilleure approche pour styliser les éléments de la liste de façon à ce qu'ils soient côte-à-côte? Je travaille sur un script d'enregistrement maintenant, et au lieu d'utiliser une table avec "Username" sur la gauche et le texte d'entrée sur la droite, je peux utiliser deux éléments de la liste.

Il est tard et j'ai travaillé sur ce projet pendant environ 8 heures maintenant, alors je m'excuse si je demande quelque chose de déroutant. N'hésitez pas à me poser des questions sur ce que j'essaie de faire.

Merci, amis. :)

Answer 1

Lorsque vous utilisez des unités de pourcentage pour les largeurs et les hauteurs, il s'agit du premier élément ancêtre qui a défini une largeur ou une hauteur. Par conséquent, tout ce que vous devez faire est de mettre en place un div qui est aussi large que deux colonnes:

<div class="columnContainer"> 
    <div class="column"> 
     Column 1 
    </div> 
    <div class="column"> 
     Column 2 
    </div> 
</div> 

.columnContainer { 
    width: 800px; 
} 
.column { 
    float: left; 
    width: 50%; 
} 

Il y a beaucoup plus bidouillage nécessaire que juste le code ci-dessus, mais c'est l'essentiel. Comme Gabriel l'a dit, vous pourriez tirer beaucoup de valeur de l'utilisation d'un framework CSS comme 960.gs

Answer 2

ok, donc pour vous aider le mieux, je vais vous diriger vers http://960.gs c'est un excellent outil pour prototyper ce genre de scénario et obtenir un code solide et fiable. Sur votre numéro actuel, vous voulez probablement définir:

width: 50%; 
float: left; 
display: block; 

sur les éléments que vous voulez diviser. Bonne chance.

Answer 3

Pour la largeur, tout dimensionnement relatif est relatif au parent, donc mettez-le comme un enfant à l'intérieur de l'élément dont vous voulez être la moitié. Pour les éléments de liste ... utilisez display: inline; ou float: left;

Answer 4

La liste en-ligne est simple mais présente des inconvénients, vous ne pouvez pas définir la hauteur ou la largeur par exemple.

ul li { 
    display:inline; 
} 

Si vous avez besoin de bloquer les éléments dont vous avez besoin pour flotter les éléments de liste et flotteurs peuvent être fastidieux parfois, par exemple, vous devez prendre soin de compensation élément [uod]l.

ul { 
    overflow:hidden; 
} 
ul li { 
    float:left; 
    display:block; 
} 

Vous souhaitez probablement supprimer les marges et les paddings dans la liste elle-même dans les deux cas.

ul { 
    margin:0; 
    padding:0; 
}