Cascading Style Sheets { Internet Explorer : Beispiel "Double-Margin-Float" }

Internet Explorer, Beispiel "Double-Margin-Float"

Drei Container div innerhalb eines umfassenden Blocks. Alle drei sind per float nach links ausgerichtet und haben einen Außenabstand links von 100 Pixeln:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eu magna nec leo porta imperdiet. Nullam accumsan ipsum non ipsum. Nunc nulla purus, tincidunt ut, rhoncus vitae, ornare ut, lacus. Mauris elementum eros quis tellus.

Die gleichen drei Container div innerhalb des umfassenden Blocks wie oben. Auch hier sind alle drei per float nach links ausgerichtet und haben einen Außenabstand links von 100 Pixeln. Zusätzlich ist für den ersten Block display:inline deklariert.:

Das Style-Sheet sieht so aus:

div.container {
    background-image: url(//graphics/grid2.gif);
    background-color: #fefeff;
    padding: 0;
    border: 2px solid navy;
    margin: 0;
    }
div.floated {
    background-color: #ffccbb;
    padding: 0;
    border: none;
    margin-left: 100px;
    float: left;
    width: 200px;
    }
div.floated-1 {
    background-color: #ffccbb;
    padding: 0;
    border: none;
    margin-left: 100px;
    float: left;
    width: 200px;
    display: inline;
    }

Das HTML für die Container sieht so aus:

<div class="container">
    <p class="floated">Lorem ipsum dolor sit amet ... </p>
    <p class="floated">Lorem ipsum dolor sit amet ... </p>
    <p class="floated">Lorem ipsum dolor sit amet ... </p>
    <div style="clear:both;"></div>
</div>
<div class="container">
    <p class="floated-1">Lorem ipsum dolor sit amet ... </p>
    <p class="floated">Lorem ipsum dolor sit amet ... </p>
    <p class="floated">Lorem ipsum dolor sit amet ... </p>
    <div style="clear:both;"></div>
</div>

Internet Explorer, Beispiel "Double-Margin-Float"

Internet Explorer, Beispiel "Double-`Margin`-`Float`"