mise en page CSS texte places juste à côté au lieu de ci-dessous

Question

J'ai un problème avec ma mise en page CSS vu ci-dessous:

#wrapper { 
width: 80%; 
} 

#content { 
float: left; 
background: #FFFF00; 
height: 350px; 
width: 70%; 
display: inline; 
} 

#rightcolumn { 
background: #EBE3CD; 
height: 350px; 
width: 30%; 
height: 250px; 
float: left; 
} 

#legendcolumn { 
background: #FF00FF; 
height: 100px; 
width: 30%; 
float: left; 
} 

Le corps de mon code HTML est comme suit:

<div id="wrapper"> 
    <div id="content"> 
    Main Content. 
    </div> 
    <div id="rightcolumn"> 
    Right Column. 
    </div> 
    <div id="legendcolumn"> 
    Here comes the legend. 
    </div> 
</div> 

Lorem ipsum dolor sit amet. 

Malheureusement, le texte lorem ipsum dolor sit amet est placé à côté de la mise en page. Cependant, je voudrais placer le texte juste en dessous de la mise en page. Comment puis-je y parvenir sans introduire un nouveau conteneur div?

Answer 1

Le contenu du flotteur et en ligne sont à l'origine de la question, mais vous pouvez contrôler cela avec La puissance de débordement:

#wrapper 
{ 
    width: 80%; 
    overflow: auto; // overflow + float = magic happy land 
} 

Edit: Vous pouvez voir pourquoi display: block et clair: les deux ne seront pas si vous ajoutez un border: 1px solid red; à #wrapper. Une des conséquences de float est que le conteneur s'effondrera à la hauteur de ses enfants non flottants (zéro ici). Bloquer et Effacer n'aura aucun effet apparent (le bloc aurait de toute façon - les divs sont nativement bloqués) si l'élément auquel ils font référence est de hauteur nulle. Le débordement automatique surmonte cela.

Answer 2

Mettez à jour votre CSS comme:

#wrapper { 
width: 80%; 
display: block; 
} 

Answer 3

Parce que votre #wrapper est fixé à seulement 80% en largeur, les éléments de texte va essayer de remplir le reste 20% de l'écran avec elle. Pas de solution exacte sans nouvelle div, mais je pense que suivant peut contourner:

#wrapper { 
    width: 100%; 
    padding-right: 20%: 
} 

Answer 4

pourquoi avez-vous #wrapper largeur que 80%? faites-en 100% à la place.