nicht angemeldet
Hallo,
++++++++++++++++++++++++++++++++++++++++++++
- Container 1/2 umschließender Container +
- ------------------- ################### +
- - Container 1 - # Container 2 # +
- - - # # +
- - - ################### +
- - - +
- - - +
- - - +
- ------------------- +
++++++++++++++++++++++++++++++++++++++++++++
Normalerweise sollte das so gehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Zweispaltig</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#zweispalten {position:relative; border:1px solid black; background-color:#AD00FF;}
#links {width:49%; border:1px solid black; background-color:#00AEAD;}
#rechts {position:absolute; top:0; bottom:0; right:0; width:49%; border:1px solid black; background-color:#FF7D7B;}
-->
</style>
</head>
<body>
<h1>Vor der Teilung</h1>
<div id="zweispalten">
<div id="links">
<h1>Container 1</h1>
<p>Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. </p>
</div>
<div id="rechts">
<h1>Container 2</h1>
<p>Text im Container 2.</p>
</div>
</div>
<h1>Nach der Teilung</h1>
</body>
</html>
Je mehr Text in #links steht, um so höher wird auch #zweispalten und damit auch #rechts, welches durch bottom:0 dazu gezwungen werden sollte. Aber natürlich macht der IE das nicht richtig. Die meisten tricksen dann damit, dass sie #zweispalten die selbe Hintergrundfarbe wie #rechts geben. Dann sieht es so aus, als würde #rechts mitwachsen.
viele Grüße
Axel