Bild und Text außerhalb des Divs

html.de-Forum HTML, XHTML & CSS
1

Hallo!

Ich habe ein Problem, ich will in einem div eine Üverschrift, dann in der nächsten Zeile ein Bild und rechts daneben einen Text haben. Nun passt sich das Div aber nicht an die Größe an und Bild und Text ragen darüber hinaus. Ich weiß, dass das was mit clear:both zu tun hat, aber ich weiß nicht wo ich das hingeben soll:

http://testseiten.te.ohost.de/example2.html

CSS:

[INDENT].form_content {
padding:15px 0;
}

.ergebnis_box {
width:100%;
padding:15px 0;
}

.ergebnis_box h2 {
color:#FFFFFF;
background:#474d55;
padding:11px 14px;
text-align:left;
}

.ergebnis_box .cnt {
width:auto;
background:#e6e6e6;
padding:24px;
}

.ergebnis_box .cnt img {
float:left;
margin-right:14px;
}

.ergebnis_box .cnt p {

float:left;

}
[/INDENT]
HTML:

[INDENT]

H1

Lorem Ipsum

    <div class="ergebnis_box">
       <h2>h2</h2>
       
       
      <div class="ergebnis_box cnt">
            <div><img src="../images/img1.png" width="271" height="249" alt="img" title="img" /></div>
            <div><p>Lorem Ipsum</p>
              <p>Lorem Ipsum</p>
        </div>
       
       </div>
[/INDENT]
2

Du bist schon auf der richtigen Fährte, die Floats innerhalb von .ergebnis_box müssen gecleart werden. Das geht, indem du z.B. ein clearendes Element (

) als letztes Element der Box einfügst.

Alternativ kannst du auch .ergebnis_box ein „overflow:hidden“ geben. Das erzielt die gleiche Wirkung

3

Super, danke!