Schwebendes Bild blutet aus seinen div-container in einem anderen div

Habe ich dieses layout, das ich auf Arbeit bin, und auf die Beiträge teilen (es ist wie ein blog), möchte ich es wie folgt Aussehen (ignoriert die feinen Unterschiede in der Bilder/styles, dieser wurde von der PSD):

Schwebendes Bild blutet aus seinen div-container in einem anderen div

So, ich habe versucht, die Codierung ist es, mit dem vorgestellten Bild der news-post eingestellt float left wie ich will der post Beschreibung, nur auf der rechten Seite. Die img ist festgelegt 300px als standard, mit der Höhe gemeint variieren je nachdem, in welcher die vorgestellten Bild. Für die tags Teil, es hat seinen eigenen div.

Also versuchte ich mit der Programmierung als solcher, und aus irgendeinem Grund, das featured image blutet aus seinen div-container, nun die überlagerung von div-tags (siehe die Seite hier). Sehen, wie es die div-tags gelegt, darunter ist es? Das ist mein problem. Ich möchte die div-tags, um seine eigene Linie unterhalb des featured image. Ich weiß nicht, warum das Bild blutet aus seinen div.

(Ich werde nur nach den einschlägigen Bereichen, da das der einzige Teil, den ich habe Probleme mit):

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

Und die CSS für das:

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

Danke Jungs.

InformationsquelleAutor Abby | 2013-05-05
Schreibe einen Kommentar