Очистка плавающих divs (ясно: оба; не работает)

Question

У меня есть сайт, на котором я работаю для участия в конкурсе через школу, и у меня возникла проблема с очисткой плавающих элементов.

Сайт размещен на http://www.serbinprinting.com/corey/development/

Район Я имею в виду список ингредиентов по направлению к нижней части страницы. Я хочу, чтобы div содержался в нем, чтобы отрегулировать его высоту на основе содержимого в поле, однако мне придется иметь столбцы, которые в настоящее время размещены, поэтому контент не сидит в потоке div.

Я попытался добавить: после элемента с ясным: оба и отображение: блок в списки, а также div, в котором он содержится, без успеха. Могу ли я получить два столбца без плавающей? Есть ли что-то, что я делаю неправильно с очищениями?

Вот код, окружающий этот вопрос ...

HTML

<section id="monthly_recipe"> 
    <div class="content_container"> 
     <div class="centered"> 
      <img src="images/icons/bread41.png"> 
      <h1>Gluten-Free Bread That Doesn't Suck</h1> 
     </div> 
     <div class="col-1"> 
      <ul><a href="http://www.onegoodthingbyjillee.com/2013/03/finally-gluten-free-bread-that-doesnt-suck.htmlhttp://www.onegoodthingbyjillee.com/2013/03/finally-gluten-free-bread-that-doesnt-suck.html"></a> 
       <li>4 cups Brown Rice Flour Blend </li> 
       <li>1 tablespoon xanthan gum</li> 
       <li>1 tablespoon gluten-free egg replacer</li> 
       <li>2 teaspoons salt</li> 
       <li>½ cup powdered milk</li> 
       <li>3 large eggs at room temperature</li> 
       <li>¼ cup butter at room temperature</li> 
       <li>2 teaspoons cider vinegar</li> 
       <li>? cup honey</li> 
       <li>1 package (2¼ teaspoons) active dry yeast (not INSTANT dry yeast)</li> 
       <li>2 cups warm water</li> 
      </ul> 
     </div> 
     <div class="col-2"> 
     </div> 
    </div> 
</section> 

CSS

#welcome { 
    position: relative; 
    width: 100%; min-height: 500px; 
    background:url(../images/welcome.jpg); 
    background-size: cover; 
} 

#welcome h1 { 
    display: inline-block; 
    background: rgba(0,0,0,0.4); 
    color: #fff; 
    font-size: 4em; 
    font-weight: lighter; 
    font-family: 'Bitter', serif; 
    text-transform: uppercase; 
    margin: 60px 0 10px 0; 
    padding: 5px 10px 5px 10px; 
} 

#monthly_recipe { 
    position: relative; left: 0; 
    width: 100%; height: 500px; 
    background: #fff; 
} 

#monthly_recipe h1 { 
    font-size: 4em; 
} 

#monthly_recipe ul li { 
    list-style: none; 
    font-size: 1.5em; 
    color: #333; 
} 

Answer 1

неправильно вопрос, я редактировал мой ответ

---

Снимите фиксированную высоту и добавить: после того, как псевдо-класс к вашему #monthly_recipe с этими правилами:

#monthly_recipe:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

Answer 2

Это кажется, что вы ограничиваете #monthly_recipe DIV показывать полный список, придав ему фиксированную высоту из 500px,

попробовать это:

#monthly_recipe { position: relative; left: 0; width: 100%; background: #fff; }

Answer 3

Я refered ур сайт. sry, есть много ошибок, которые вы должны тщательно отнести к основам html и его классам и использовать css reset, чтобы закончить его быстро и правильно.

в любом случае использовать:

Col-1 { поплавка: левый } Col-2 { поплавка: левый }

и относятся clearfix.

использовать clearfix для родителя col-1 и col-2 с другим классом [не в контейнере содержимого].