nicht angemeldet
Hi zusammen,
ich habe ein 3 spaltiges Layout, den Code der Bsp.-Datei habe ich unter mein Posting geklebt.
Je nachdem, welchen Browser ihr benutzt, siehts ein wenig anders aus.
Das Problem nun ist folgendes:
Die linke Spalte soll grau hinterlegt sein, die rechte auch. Die mittlere Hauptspalte soll weiss hinterlegt sein, unabhängig, wieviel Inhalt jeweils drinsteht! Sind sie auch ungefähr, aber eben nicht richtig in der Höhe.
Bei jetzigem CSS-Code habe ich in den gängigen Browsern verschiedene Ansichten:
Mozilla 1.72:
-------------
haut die mittlere Spalte über das Layout hinaus. ist richtig kaputt.
Opera 7.23 und IE 6.0:
----------------------
Stellt das Layout richtig dar, erzeugt aber grundsätzlich einen Scrollbalken, weil die Seite sich auf "ziemlich lang" vergrößert.
Hat jemand einen Lösungsansatz für mich?
BITTE KEINE TABELLENSTRUKTUR! Es soll ein reines CSS-Layout sein.
Vielen Dank!!!
Gruss
Beatnik
Hier der Code der Seite:
<html>
<head>
<style type="text/css">
/* Definitionen des Body und der Div-Container */
body {
text-align:center;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
/* Abstandsdiv */
#topspace {
height:40px;
background-color:#ffffff;
}
/* Inhaltsbereich (3spaltig) */
#main {
width:100%;
height:100%;
border: 1px dotted #9D9EB1;
background-color:#eeeded;
}
/* Inhaltsbereich (Mitte) */
#content {
margin-left: 120px;
margin-right: 120px;
padding-right:10px;
padding-left:10px;
text-align: left;
background-color:#ffffff;
height:100%;
border-right: 1px dotted #9D9EB1;
border-left: 1px dotted #9D9EB1;
}
/* Linke Spalte (grau hinterlegt) */
#leftbox {
border-top: 1px dotted #9D9EB1;
width: 120px;
float: left;
}
/* Rechte Spalte (grau hinterlegt) */
#rightbox {
border-top: 1px dotted #9D9EB1;
width: 120px;
float: right;
}
</style>
</head>
<body>
<div id="main">
<div id="topspace"></div>
<div id="leftbox">Links</div>
<div id="rightbox">Rechts</div>
<div id="content">Mitte</div>
</div>
</body>
</html>