Clearing floating divs ( clear:both; not working )

Question

I have a site that I am working on for a competition through school, and I am having an issue with clearing floating elements.

The site is hosted at http://www.serbinprinting.com/corey/development/

The area I am referring to is the list of ingredients toward the bottom of the page. I want the div it is contained in to adjust its height based on the content in the box, however I am going to have to columns that are currently floated, so the content is not sitting in the flow of the div.

I have tried adding an :after element with clear:both and display: block to the lists as well as the div it is contained in with no success. Can I achieve the two column layout without floating? Is there something I am doing incorrectly with the clears?

Here is the code surrounding the issue...

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

Misread the question, I edited my answer

---

Remove the fixed height and add a :after pseudo class to your #monthly_recipe with these rules:

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

Answer 2

It seems that you are limiting the #monthly_recipe div from showing the full list by giving it a fixed height of 500px,

try this:

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