nicht angemeldet
Hallo Leute,
ich bräuchte mal wieder Rat (siehe Beispielseite) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testseite</title>
<style>
div#background {
position: relative;
margin: 100px auto 0 auto;
border: solid black 1px;
background: blue;
width: 500px;
height: 200px;
}
div#left {
float: left;
background: green;
width: 150px;
}
div#middle {
float: left;
background: red;
width: 350px;
}
</style>
</head>
<body>
<div id="background">
<div id="left">
Menüleiste
</div>
<div id="middle">
Contentzeile 1<br>
Contentzeile 2<br>
Contentzeile 3
</div>
</div>
</body>
</html>
=============================================================
Folgendes Vorhaben: Ich verwende ein Blockelement (id=background) irgendwo im Flow einer Seite. In diesem Block geschachtelt sind zwei Floats, die sich links ausrichten. Der erste (left) soll den Menübereich darstellen, der zweite (middle) den Contentbereich. Wenn in einer der beiden Bereiche Elemente hinzugefügt werden, sollen alle Blöcke incl. dem Hintergrund auf die gleiche Höhe gezogen werden. Ich dachte also, dass der left und der background-Block mit dem Content-Block mitwachsen, aber dem ist nicht so, wie man sieht. Wenn man im Beispiel die height-Angabe im background-Block wegnimmt wird es noch deutlicher.
Ich habe vorher versucht die beiden inneren Blöcke (left, middle) absolut zum backround zu positionieren. Hat mich aber auch nicht weiter gebracht. Weiß jemand Rat ? Wie muss ich sowas aufbauen ?
Ich möchte keine Tabelle zum layouten verwenden. Kann mir nicht vorstellen, dass sowas nicht möglich ist ...