Bild mit Text in einer Div-Box / Bild ragt unten aus der Box heraus

Grille

Erfahrenes Mitglied
Hallo,

komisch: dieses Problem kommt mir bekannt vor und ich glaube ich habe dafür auch schon einmal eine Lösung gefunden, aber seit zwei Tagen such ich nun schon .. daher muss ich jetzt doch fragen:

Ich habe einen Text und ein Bild in einer DIV-Box. Der Text umfließt das Bild. Leider guckt das Bild aber unten aus der DIV-Box herraus in dem es eigentlich steht. Die DIV-Box soll aber alle Elemente umschließen.

Könnt ihr mir bitte sagen wie ich diesen Fehler behebe?

die HTML Konstruktion sieht so aus:
HTML:
<div>
    <div class="tt_news_latest_contentbox">
        <!-- UEBERSCHRIFT -->
        <div id="borderline_top"></div>
        <div class="green_headline">###NEWS_TITLE###</div>
        <div id="borderline_bottom"></div>

        <!-- DATUM -->
        <div class="tt_news_quicklink">###NEWS_DATE###</div>

        <div class="tt_news_message">
            <!-- BILD -->
            ###NEWS_IMAGE###
            <!-- UNTERTITELTEXT -->
            ###NEWS_SUBHEADER###
        </div>

        <!-- WEITERKNOPF -->
        <div class="tt_news_quicklink">###MORE###</div>
    </div>
    <div class="breakline clearfix"></div>
</div>
Dies ist das CSS
Code:
/* ******** PAGE ****** */
html {
    margin:0px;
    padding:0px;
}

body {
    padding:50px 0px 0px 0px;
    margin:0px;
    background: url("/uploads/tf/bg.png") #b5c7dd repeat-x;
}

/* ******** VOREINSTELLUNGEN ****** */
div { 
    margin: 0px;
    padding: 0px;
}

img {
    display: block;
    border: 0;
}

/* ******** DIV-BOX-SYSTEM ****** */

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden;
}

.floatbox {
    overflow: hidden;
}

.neben {
    float: left;
    display: block;
}

_news_latest_contentbox {
    /* IE hack */
    height: 1%;
    line-height: 1.3;
    /* IE hack end */
    display: block;
}

_news_latest_contentbox IMG {
    margin: 0px 5px 5px 0px;
    float:left;
}

_news_quicklink{
    text-align: right;
    font-size: 0.6em;
}

_news_message{
    margin-top:10px;
}

.green_headline {
    background: #5d813c;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: none;
    color: #FFF;
    padding: 0px 10px;
}

.green_headline a{
    font-size: 1em;
}

.breakline {
    height: 10px;
    background: url("/uploads/tf/breakline.png") repeat-x;
    display: block;
    margin:5px 0px 10px 0px;
}

#borderline_top {
    height: 4px;
    background: url("/uploads/tf/borderline_top.png");
    display: block;
}

#borderline_bottom {
    height: 4px;
    background: url("/uploads/tf/borderline_bottom.png");
    display: block;
}
 
Hi,

ruf mal die Klasse clearfix im DIV tt_news_latest_contentbox auf:

HTML:
<div class="tt_news_latest_contentbox clearfix">...</div>

Und fehlt hier in den Klassen-Namen nicht der Präfix ". tt"?

CSS:
_news_latest_contentbox {
    /* IE hack */
    height: 1%;
    line-height: 1.3;
    /* IE hack end */
    display: block;
}

_news_latest_contentbox IMG {
    margin: 0px 5px 5px 0px;
    float:left;
}

_news_quicklink{
    text-align: right;
    font-size: 0.6em;
}

_news_message{
    margin-top:10px;
}

mfg Maik
 
stimmt ... mit dem clearfix dort oben klappt es! Komisch .. ich dachte dass man immer NACH dem float das clearfix machen muss (also zuerst das float des textes um das Bild ... dann clearfix).

das muss hier irgendwie das Forum abgeschnitten haben.

Vielen Dank für Deine Hilfe
 
Ich habe bis jetzt meine Boxen immer so aufgebaut:

HTML
Code:
<div class="floatbox">
    <div class="neben"></div>
    <div class="neben floatbox">
        <div class="neben"></div>
        <div class="neben clearfix"></div>
    </div>
    <div class="neben clearfix"></div>
</div>
CSS
Code:
/* ******** DIV-BOX-SYSTEM ****** */

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden;
}

.floatbox {
    overflow: hidden;
}

.neben {
    float: left;
    display: block;
}
bedeutet es ich kann dies auch so schreiben:?
HTML
Code:
<div class="floatbox clearfix">
    <div class="neben"></div>
    <div class="neben floatbox clearfix">
        <div class="neben"></div>
        <div class="neben"></div>
    </div>
    <div class="neben"></div>
</div>
 
Meine Aussage und mein empfohlener Artikel beantwortet deine Frage.

mfg Maik
 
Zurück