nicht angemeldet
Hallo!
Ich denke mal, dass ich vor einem einfachen Anfängerproblem stehe. Allerdings habe ich auf selfhtml und css4you bereits Einiges gelesen und finde nicht heraus, wo der Fehler liegt ...
Ich habe meinen Quelltext auf das Wesentliche reduziert und hier reinkopiert. Im Quelltext werden die vier div left1, left2, right1 und right2 innerhalb des div main positioniert. Das Problem ist nun, dass der div main bei der Darstellung im Browser nur eine Zeile hoch ist, darunter folgen dann die vier genannten divs. Man beachte die weinrote Hintergrundfarbe und das "Eins" und "Zwei".
Ziel ist ein 750px breiter div, in dem ich tabellenartig mehrere divs positionieren kann, indem ich ihren Abstand zum linken und oberen Rand des übergeordneten div angebe.
Ich möchte nicht weiter mit Tabellen layouten. Einige Bücher zu css sind bereits bestellt, aber noch nicht da. Würde mich freuen, wenn mir solange hier jemand weiterhelfen kann.
Viele Grüße,
Thorsten
<head>
<style type="text/css">
body {
background-color: #333333;
}
#main {
width: 750px;
margin: 5px auto;
background-color: #700515;
position: relative;
}
#left1 {
position:absolute; top:50px; left:50px; width:325px; height:200px;
background-color: white;
}
#left2 {
position:absolute; top:250px; left:50px; width:325px; height:200px;
background-color: yellow;
}
#right1 {
position:absolute; top:50px; left:375px; width:325px; height:200px;
background-color: black;
}
#right2 {
position:absolute; top:250px; left:375px; width:325px; height:200px;
background-color: green;
}
</style>
</head>
<body>
<div id="main">
Eins
<div id="left1"></div>
<div id="left2"></div>
<div id="right1"></div>
<div id="right2"></div>
Zwei
</div>
</body>
Gunnar Bittersmann
Der Martin