Floating image bleeds out of its div container into another div

Question

I have this layout I'm working on, and on the posts parts (it's like a blog), I want it to look like this (ignore the subtle differences in images/styles, this was taken from the PSD):

So I tried coding it, with the featured image of the news post set to float left as I want the post description to just be at its right. The img is set to 300px as a standard, with the height meant to vary depending on whatever the featured image will be. For the tags part, it has its own div.

So I tried coding it as such, and for some reason, the featured image bleeds out of its container div, now overlapping the tags div (see the actual page here). See how it has the tags div placed underneath it? That's my problem. I want the tags div to have its own line below the featured image. I don't know why the image is bleeding out of its div.

(I'll just post the relevant areas, since that's the only part I'm having problems with):

<div id="newsmain">

                        <div id="titlearea">

                            <div class="comment_bubble">

                                <a href="">9</a>

                            </div>

                                <span class="post_titles"><a href="">Colored Prototypes of Alter's Tales of Vesperia Estelle Figure - Pre-orders Now Open!</a></span><br />

                                <span class="under_titles">POSTED BY <a href="">A745</a> | APRIL 27, 2013 | 8:00pm GMT | FILED UNDER: <a href="">TALES NEWS</a></span>

                        </div>

                <!-- NEWS BODY -->

                        <div class="newsbody">

                            <a href=""><img class="featured_image" src="http://gallery.abyssalchronicles.com/albums/userpics/10002/estelle_10.jpg" alt="" /></a>


                            Alter has released pictures of the colored prototype of their upcoming <em>Tales of Vesperia 1/8 Scale Estelle figure</em>. Some shops also have pre-orders open. In addition, the <em>Milla Maxwell plushie</em>, also by Alter, has some pre-orders open as well.
                            <br /><br /><br />

                            <a href="">READ THE REST »</a>

                        </div>

                            <div class="tagsline">

                            TAGS: <a href="">TALES OF VESPERIA</a>, <a href="">TALES OF XILLIA</a>, <a href="">ESTELLE</a>, <a href="">MILLA MAXWELL</a>, <a href="">MERCHANDISE</a>, <a href="">PS3</a>, <a href="">XBOB360</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, 

                            </div>

                    </div>

And the CSS for that:

#newsheader {
    width: 628px;
    background: #3396cf;
    font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    color: #ffffff;
    font-size: 18px;
    padding: 5px;
    margin-bottom: 10px;
}

#titlearea {
    width: 628px;
    border-left: 9px solid #da5099;
    border-bottom: 1px solid #c5a7bc;
    padding: 2px 0 1px 4px;
}

.comment_bubble {
    width: 50px;
    height: 35px;
    padding-top: 3px;
    text-align: center;
    color: #ffffff;
    font-family: Georgia, Arial, Tahoma, Verdana, sans-serif;
    font-size: 15px;
    font-weight: bold; 
    background: url('images/commentbubble.png') no-repeat left top;
    float: right;
}

.comment_bubble a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}


.post_titles {
    color: #6c053c;
    font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    font-size: 17px;
    padding: 0;
}

.post_titles a {
    color: #6c053c;
    text-decoration: none;
}

.post_titles a:hover {
    color: #ba0767;
}

.tagsline {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #636262;
    padding: 5px 5px 3px 13px;
    border-bottom: 1px solid #c5a7bc;
    text-transform: uppercase;
}

.tagsline a {
    color: #868889;
    text-decoration: none;
    width: 100%;
}

.tagsline a:hover {
    color: #000000;
}

.under_titles {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #636262;
    padding: 0;
    text-transform: uppercase;
}

.under_titles a {
    color: #868889;
    text-decoration: none;
}

.under_titles a:hover {
    color: #000000;
}

.newsbody {
    padding: 9px 8px 15px 13px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

.featured_image {
    border: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;
    height: auto;
    float: left;
    text-align: left;
}

Thanks guys.

Answer 1

Add this to your CSS:

#newsmain {overflow: hidden;}
.tagsline {clear: both;}

The first line isn't strictly needed, but it will help the container to wrap around the contents. Floats will hang out of their containers unless some kind of containing method is used, and overflow: hidden is the simplest method (though it isn't appropriate in all situations).