Comment est-ce que je fais développer une div à la largeur de la page avec css?

Question

J'ai une page avec quelques divs, un peu comme ceci:

<div id="div_one">blah blah blah</div> 
<div id="div_two">blah blah blah</div> 

Je veux qu'ils soient centrés horizontalement, l'un après l'autre et pour la seconde à étendre à la largeur de la page.

Answer 1

.first_one 
{ 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

.second_one 
{ 
    width: 100%; 
} 

Alors à votre avis, pour la première que vous feriez

<div class = "first_one"> 
... 
</div> 

Pour la seconde, vous feriez

<div class = "first_one second_one"> 
... 
</div> 

Answer 2

Les divisions sont la largeur entière de leur conteneur par défaut.

Pour centrer le contenu horizontalement, définissez-le sur "text-align: center;". Si elles sont dans un conteneur, utilisez également "margin: auto" sur le conteneur, ce qui définira les marges gauche et droite pour centrer automatiquement la div.

Answer 3

Gardez à l'esprit il y a des marges par défaut sur les éléments afin Même si c'est 100%, il pourrait encore y avoir des lacunes sur le côté. Vous pouvez utiliser certains CSS pour réinitialiser les marges à 0 si nécessaire.

Answer 4

body{ text-align: center; } 

.first_one 
{ 
    width: 600px; /* Can be any width */ 
    margin:0 auto; 
} 

/* Reset text-align for child content */ 
.first_one, .second_one{text-align: left} 

Pour centrer "first_one" dans IE6, vous aurez envie de mettre 'text-align: center' sur l'élément parent. Dans ce cas, je suppose que c'est le nœud du corps. De plus, margin: 0 auto ne fonctionne que si vous spécifiez une largeur.

Vous devrez ensuite définir l'alignement du texte à gauche sur les divs enfants afin que le contenu qu'ils contiennent ne soit pas centré.

Vous n'avez pas besoin de spécifier une largeur sur "second_one" car les éléments de bloc se développent naturellement pour remplir leurs conteneurs parents. De plus, en ne définissant pas la largeur, le navigateur tient compte de tout remplissage, marge et bordures que vous pouvez appliquer à "second_one" sans casser la mise en page.