Joachim: Div nebeneinander positionieren

Beitrag lesen

Hi,

es gibt allerdings ein paar unterschiede in der Interpretation von float und clear, wie der kleine Test zeigt, bei dem 4 Divs quadratisch (rot oben, blau unten) angeordnet werden sollen.

Mozilla begnuegt sich mit einem clear left fuer das dritte div um einen Umbruch zu bekommen, das vierte Div floatet dann neben das Dritte.

Im IE floatet das Vierte neben das zweite Div. Er benoetigt die p-Angaben im Test, um die gleiche Darstellung zu erzeugen. Diese reicht Mozilla aber nicht.

Der Test kombiniert beide Varianten und sollte im Mozilla, IE (6) und Opera 7 korrekt dargestellt werden (Sorry, die Zaehlweise beginnt bei 0):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

<style type="text/css">
p {
    margin: 0px;
    clear: left;
}

#ebene0 {

width:200px;
 height:200px;
 background-color: red;
    clear: left;
    float: left;
    margin: 1px;

}

#ebene1 {

width:200px;
 height:200px;
 background-color: red;
    float: left;
    margin: 1px;

}

#ebene2 {

width:200px;
 height:200px;
 background-color: blue;
    clear: left;
    float: left;
    margin: 1px;

}

#ebene3 {

width:200px;
 height:200px;
 background-color: blue;
    float: left;
    margin: 1px;

}
</style>

</head>

<body marginheight="0" marginwidth="0">
<p>
<div id="ebene0">0</div>
<div id="ebene1">1</div>
</p>
<p>
<div id="ebene2">2</div>
<div id="ebene3">3</div>
</p>
</body>
</html>

Gruesse, Joachim

--
Am Ende wird alles gut.