Problem bei zweispaltigen DIV-Blöcken [Archiv]

RattuS

2009-05-23, 13:17:05

Hallo,

ich fuchtel etwas mit CSS rum und bin nun auf ein Problem gestoßen, das ich bisher nicht lösen konnte.

Ich möchte ein zweispaltiges Layout, dessen linke Spaltenhöhe abhängig von der rechten Spaltenhöhe ist. Nur ist die linke Spaltenhöhe bei der jetzigen Struktur nur von der Anzahl der untergeordneten Elemente abhängig.

Das Ganze sieht also so aus:
http://img5.imageshack.us/img5/4775/28374508.th.jpg (http://img5.imageshack.us/my.php?image=28374508.jpg)

Wenn ich die Höhe der linken Spalte statisch setze, stimmt das Ergebnis zwar, ist aber eben nicht variabel:
http://img19.imageshack.us/img19/3421/89987120.th.jpg (http://img19.imageshack.us/my.php?image=89987120.jpg)

CSS:

body {
background-color: #F0F0F0;
font-family: Tahoma, Helvetica;
font-size: 12pt;
}

.main {
border: 1px solid #404040;
margin-left: auto;
margin-right: auto;
width: 800px;
}

.header {
background-image: url(../graphics/test.png);
height: 59px;
width: 290px;
}

.navigationTop {
border-bottom: 1px solid #404040;
background-color: #0060FF;
border-top: 1px solid #404040;
color: #FFFFFF;
height: 32px;
}
.navigationTop a {
color: #FFFFFF;
text-decoration: none;
}
.navigationTop a:hover {
color: #FFC000;
}

.navigationTopButton {
float: left;
height: 16px;
padding: 8px;
padding-left: 16px;
padding-right: 16px;
}
.navigationTopButton:hover {
background-color: #0050FF;
}

.navigationLeft {
background-color: #0080FF;
border-right: 1px solid #404040;
color: #FFFFFF;
float: left;
width: 160px;
}

.navigationLeftButton {
padding: 8px;
padding-left: 21px;
padding-right: 21px;
}

.content {
float: left;
margin: 16px;
}

.footer {
border-top: 1px solid #404040;
clear: both;
font-size: 8pt;
padding: 4px;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/default.css">
<title>Test</title>
</head>

<body>
<div class=main>
<div class=header></div>
<div class=navigationTop>
<a href="index.html"><div class=navigationTopButton>Link 1</div></a>
<a href="index.html"><div class=navigationTopButton>Link 2</div></a>
<a href="index.html"><div class=navigationTopButton>Link 3</div></a>
<a href="index.html"><div class=navigationTopButton>Link 4</div></a>
<a href="index.html"><div class=navigationTopButton>Link 5</div></a>
<a href="index.html"><div class=navigationTopButton>Link 6</div></a>
<a href="index.html"><div class=navigationTopButton>Link 7</div></a>
<a href="index.html"><div class=navigationTopButton>Link 8</div></a>
</div>
<div class=navigationLeft>
<div class=navigationLeftButton>Kategorie 1</div>
<div class=navigationLeftButton>Kategorie 2</div>
</div>
<div class=content>
<p>
Hier steht Text mit Buchstaben<br>
wie ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
und so...<br>
<img src="http://validator.w3.org/images/w3c.png" alt="w3c"><br>
Neue Zeile<br>
mit neuem Text<br>
und so...
</p>
</div>
<div class=footer>Mit W3C validieren</div>
</div>
</body>
</html>

Danke für eure Hilfe!