Comment positionner plusieurs DIV en CSS

Question

J'ai suivi un long tutoriel sur W3Schooles pour apprendre les CSS; J’ai appris quelques notions de base, mais je n’ai toujours pas atteint mon objectif principal: Positionner les DIV

C'est ce que j'essaie de faire

*---------*---------*
*         *         *
*         *         *
*---------*---------*

Mon objectif est simple et trivial pour certains, mais j'ai des maux de tête lorsque je le fais dans le bon sens . En fait, je l'ai fait mais beaucoup de problèmes se posent lorsque j'ajoute du texte aux DIV ou ils fusionnent simplement avec une autre DIV

Ce que j’ai fait est simplement de jouer avec les valeurs de marge et de remplissage avec FireBug. Tout ce dont j'ai besoin maintenant, c'est de m'apprendre cette astuce simple (j'espère). Ce qui me manque, c'est: comment fonctionne ce positionnement simple? Dois-je utiliser un positionnement absolu et relatif? Changer la marge, le rembourrage, la taille ??

Si vous avez un bon tutoriel expliquant ce point, veuillez le pointer. J'ai eu d'autres maux de tête à la recherche de cela sur Google.

Answer 1

On dirait que vous essayez de placer deux colonnes côte à côte. C’est assez simple et couvert en profondeur ici:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslay / 2-col /

J'ai tendance à ne pas utiliser la propriété position à moins de superposer certains éléments.

Answer 2

Création d'une mise en page à 2 colonnes en CSS

Personnellement, je n'aime pas utiliser un clear: les deux sur une balise br.

Utiliser overflow: auto sur le div parent par

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Answer 3

J'ai eu de la chance en émulant le code contenu dans le système de grille 960 .

La bonne façon est difficile, car de nombreux problèmes ne sont pas vraiment compatibles entre navigateurs. Les navigateurs s’améliorent, mais c’est toujours un cauchemar si vous devez utiliser quelque chose d’être compatible avec IE. (beaucoup de hacks)

Answer 4

Avec le positionnement absolu, vous pouvez absolument placer l’un de vos divs. l'inconvénient est qu'ils sont bloqués dans ces positions, peu importe la résolution ou la taille de la fenêtre affichant votre page.

Ce que vous pouvez faire est de faire flotter votre colonne de gauche vers la gauche, puis de ne pas spécifier de flottant sur la colonne de droite. Conservez le positionnement par défaut en ne spécifiant ni absolu ni relatif, puis ajustez simplement la largeur des éléments selon vos besoins.

Answer 5

Si vous êtes d'accord pour définir des largeurs spécifiques sur vos divs, voici ce qui a bien fonctionné pour moi:

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

Le & flo; float: left " place les colonnes côte à côte. La dernière div (avec le clear: les deux) fait en sorte que tout ce que vous mettez après les colonnes reste en dessous des colonnes. De cette façon, vous pouvez modifier la largeur de l'une des colonnes sans modifier le style de l'autre.

Answer 6

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>