Hallo zusammen,
ich habe ein komplexes 3-Spalten-Layout mit Header und Footer auf Basis von CSS. Nun sollen im Content-Bereich sehr breite Bilder dargestellt werden.
Gewünscht wird, dass die rechte Spalte ganz rechts neben dem Content steht.
Bei mir wird die rechte Spalte jedoch nur an den rechten Bildschirmrand geschoben. Der body-Bereich und damit das übergeordnete Element ist jedoch breiter.
Im folgenden Beispiel "
Test-Ueberbreite-Tabelle" , das in dieser Form leider nur im Firefox funktioniert, habe ich versucht das Problem auf das wesentliche zu reduzieren. Anstatt eines breiten Bildes habe ich eine breite Tabelle eingefügt. Beachtet bitte den unteren Scroll-Balken.
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test-Uebergroße-Tabelle</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-color: red;
height: 100%;
}
#left {
float:left;
background-color: #ccc;
height: 100%;
width:200px;
}
#right {
float:right;
background-color: #ccc;
height: 100%;
width:200px;
}
#content {
background-color: #ddddff;
/* height: 100%;*/
margin: 0 205px 0 205px;
/* overflow: auto;*/
}
.clearfix:after {
content: ".";
display: block;
height: .1px;
clear: both;
visibility: hidden;
font-size: 0;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
#centerTable {
border: 3px solid blue;
background-color: green;
color: white;
height: 300px;
width: 2000px;
}
</style>
</head>
<body>
<div id="left">
<h2>Linke Seite</h2>
</div> <!--left-->
<div id="right">
<h2>Rechte Seite</h2>
</div> <!--right-->
<div id="content" class="clearfix">
<h2>Das hier ist der Content-Bereich:</h2>
<p>Im Content-Bereich liegt eine sehr breite Tabelle, oder ein sehr breites Bild.</p>
<table id="centerTable">
<tr>
<td>
<h1>Übergroße Tabelle oder Grafik</h1>
</td>
</tr>
<tr>
<td>
<h2>
Diese grüne Tabelle sollte komplett zwischen der grauen linken und grauen rechten Seite liegen.
Dummerweise wird die rechte Seite am rechten sichtbaren Bildschirmrand ausgerichtet,
und schiebt sich nicht ans Ende von 'body'.
</h2>
</td>
</tr>
<tr>
<td>
<h2>
Wenn man im #content {overflow: auto;} hinzufügt, bleibt der Content-Bereich zwar zwischen den grauen Flächen,
und man erhält sogar einen Scrollbalken, doch lässt sich damit nur der Content-Bereich scrollen.
Ich würde mir wünschen, dass sich die komplette Site bewegen lässt, und der Bereich 'Rechte Seite'
hinter der Tabelle angezeigt wird.
</h2>
</td>
</tr>
</table>
</div> <!--center-->
</body>
</html>
Wäre echt Klasse wenn sich hier eine Lösung für das Problem finden lässt.
Bin mir mittlerweile auch nicht mehr sicher, ob das Layout mit floats so etwas überhaupt hergibt.
Vielen Dank schon einmal im voraus
ForestGump