Bild verdrängt Text

Flexibles CSS-Layout

Bild verdrängt Text

Flexible CSS-Layouts haben oft keine feste Breite. So verdrängt ein floatendes Bild den Text und dieser läuft mit overflow: hidden; und display: inline-block; (für den Internet Explorer 6) nicht unter das Bild. Der Textcontainer passt sich der zur Verfügung stehenden Breite automatisch an.

Lange Wörter in flexiblen Layouts brechen im Internet Explorer 6 um

Ist ein Wort zu lang wird es abgeschnitten und im Internet Explorer 6 rutscht dann der gesamte Textblock unter das floatende Bild. Dies kann mit word-wrap: break-word; verhindert werden.

<style type="text/css">
.pictureblock {
    float: left;
    padding: 0 10px 0 0;
}
.textblock {
    overflow: hidden;
    word-wrap: break-word;
}
* html .textblock {display: inline-block;}
</style>
<div class="teaser clearfix">
    <div class="pictureblock">
        <img src="bild.png" alt="" />
    </div>
    <div class="textblock">
        <p class="headline">Headline</p>
        <p class="text">Text</p>
    </div>
</div>

Beispiel

bild

Headline

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text wird abgeschnitten
Oft werden bei dieser Technik Texte abgeschnitten. Bei den meisten Browsern ragt die Schrift etwas aus den Elementen heraus und overflow:hidden; schneidet sie ab. Gerade wenn z.B. ein großes "W" am Anfang steht wird oft 1px angeschnitten. Mit etwas padding kann dieses unschöne Problem behoben werden.

Impressum