CSS Layout размещает текст прямо рядом с ним, а не ниже

Question

У меня проблема с моим макетом CSS, показанным ниже:

#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;
}

Тело моего HTML выглядит следующим образом:

 <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.

К сожалению, текст lorem ipsum dolor sit amet расположен рядом с макетом. Тем не менее, я хотел бы разместить текст прямо под макетом. Как я могу добиться этого, не вводя новый контейнер div ?

Answer 1

Плавающее и встроенное содержимое вызывают проблему, но вы можете управлять этим с помощью The Power of Overflow :

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

Редактировать: Вы можете понять, почему display: block и clear: оба не будут работать, если вы добавите border: 1px solid red; к #wrapper. Одним из последствий float является то, что контейнер рухнет на высоту его неплавающих дочерних элементов (здесь ноль). Блок и Очистка будут иметь нулевой видимый эффект (блок был бы в любом случае - div'ы изначально являются блоком), если элемент, на который они ссылаются, имеет нулевую высоту. Переполнение авто преодолевает это.

Answer 2

Поскольку ваш #wrapper имеет ширину всего 80%, этот текстовый элемент будет пытаться заполнить оставшиеся 20% экрана им.Нет точного решения без нового div, но я думаю, что следующее может обойти:

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

Answer 3

почему у вас есть #wrapper ширина как 80%? сделайте 100% вместо этого.

Answer 4

Обновите свой CSS как:

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