Zaiman: 3 Spaltenlayout mit automatischer Größe

Beitrag lesen

SELF-Forum

3 Spaltenlayout mit automatischer Größe

Zaiman
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich bin in CSS-Programmierung noch Anfänger, hab schon ewig jetzt herumgeguckt und ausprobiert und kriege es aber nicht hin. Ich möchte gerne ein 3-Spaltenlayout für eine Homepage entwerfen, bei dem die beiden "Außenspalten" automatisch mit der Höhe des Contents in der Mitte übereinstimmen. Der Spalte in der Mitte soll ebenfalls automatisch die Höhe einnehmen, die gebraucht wird, ohne dass ich eine feste Größenangabe mache. Zudem soll alles auf eine Breite von 100% entworfen werden, feste Pixelangaben möchte ich nicht machen.

Weiterhin soll in allen Spalten jeweils unten noch etwas untenbündig stehen.

Mein Ansatz ist bisher dieser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#container {
   position:absolute;
   top:0%;
   left:0%;
   width:100%;
   min-height:auto;
   color: black;
}

#linkeleiste {
   position:absolute;
   float:left;
   top:0%;
   left:0%;
   width:14%;
   min-height:100%;
   background-color:#19194B;
   color: white;
   padding-top:8px;
}

#linkeleisteunten {
   position:absolute;
   bottom: 5px;
   color: white;
}

#rechteleisteunten {
   position:absolute;
   bottom: 5px;
   color: white;
}

#rechteleiste {
   position:absolute;
   float:right;
   top:0%;
   left:86%;
   width:14%;
   min-height:100%;
   background-color:#19194B;
   color: white;
   padding-top:8px;
}

#mittlererbereich {
   position:absolute;
   float:left;
   top:0%;
   left:14%;
   width:72%;
   min-height:100%;
   background-color:#ffffff;
   color: black;
   padding-top:8px;
}

#mittlererbereichunten {
   position:absolute;
   bottom:5px;
   width: 10%;
   left:45%;
}
</style>
</head>

<body bgcolor="#dddddd">
<div id="container">
 <div id="linkeleiste">links<br>links<br>links<br><div id="linkeleisteunten">linksunten<br></div></div>

<div id="mittlererbereich">
  Content<br>Content<br>Content<br>Content<br>
  <div id="mittlererbereichunten">mitteunten<br></div>
 </div>
 <div id="rechteleiste">rechts<br><div id="linkeleisteunten">rechtsunten<br></div>
</div>

</body>
html>

Nun habe ich einige Baustellen:

  1. Die Außenspalten sind nicht entsprechend der Größe der Mittelspalte mit dem Content.

  2. "linksunten" und "rechtsunten" stehen falsch

  3. Das "mitteunten" steht nicht unterhalb des Contents.

Wie muss ich das Ganze programmieren, um meine Ziele zu erreichen?

Vielen Danke schon im voraus, ich hoffe Ihr könnt mir helfen,

Zaiman

Beitrag melden
–
Informationen zu den Bewertungsregeln