nicht angemeldet
Hallo,
folgendes Problem:
gefloatete Elemente verhalten sich in IE und FF unterschiedlich in der
Positionierung gegenüber dem folgenden Blockelement, wenn dieses eine
größere height hat als das gefloatete Element.
Ziel: Meine Homepage zentral ausrichtien. Eine Seite besteht (im Wesentlichen)
aus 3 Elementen, die in etwa folgendermaßen angeordnet sein sollen:
-ein großes Bild, das genau mittig im Fenster zu sehen ist;
-eine div, die über dem Bild liegt (z.b. höherer z-index), eine kleinere width
hat und etwas versetzt zur Mitte des Fensters positioniert sein soll;
-das Menü, das über dem Bild links ist und dieses halb überdeckt:
Skizze:
_________________
_|_ _________ |
|___| | | |
| | | |
| | | |
| | | |
|_____| |_|
| |
|_________|
Erster Versuch bestand darin, dem body-Element {text-align:center;} zu geben,
dem Bild {margin:auto;} und dem Menü und der div
{left:50%; margin-left:+/-...px; z-index:2;}. Das war aus mehreren Gründen
eine schlechte Idee.
Zweiter Versuch: wieder tex-align:center für einen Container (z.B. body),
dann eine div, die Menü, div und Bild enthält und {margin:auto;} hat und
die innere div und das Menü mittels float und margin positionieren.
Wenn ich aber bspw. das Menü mit {float:left;} auszeichne und ein folgendes Blockelement
eine größere height hat als das Menü, dann werden im IE Menü und dieses
Blockelement NEBENEINANDER angeordet, wohingegen im FF - wie gewünscht -
das Menü das Blockelement überdeckt.
Weiß jemand, warum und was ich da tun kann?
Hier eine vereinfachte Darstellung der HTML (hier nur mit divs):
<html>
<head>
<style type="text/css">
body {text-align: center;}
#koerper {
margin: 0 auto;
width: 500px;
border: 1px solid blue;}
#leiste {
float: left;
margin-top: 20px;
width: 100px;
height: 300px;
background-color: yellow;}
#topic {
float: left;
width: 50px;
margin-left: 100px;
margin-top: 100px;
height: 50px;
background-color: blue;}
#inhalt {
width: 400px;
margin-left: 50px;
height: 500px;
background-color: red;}
</style>
</head>
<body>
<div id="koerper">
<div id="leiste"></div>
<div id="topic"></div>
<div id="inhalt"></div>
</div>
</body>
</html>
Vielen Dank im Voraus für Eure Antworten!