✔ Höhe von Divs - Problem

[Miami Vice]

Hallo,

ich habe einen mittels CSS definierten Textcontainer, der sich je nach Textlänge automatisch vergrößert.

Steht in dem Container nur ein Satz, ist er klein.
Steht in ihm hingegen ein kompletter Text so ist der Container so groß, dass der komplette Text in ihm angezeigt wird.

So, das klappt alles wunderbar.

Nun habe ich um diesen Text links und rechts zwei Balken.
Im linken Balken ist eine Navigationsleiste, im rechten Balken sind verschiedene Links.

Die Balken sind so definiert:

Hier der linke:

#menuleft {
color:#000000;
width:15%;
height:1000px;
float:left;
padding:8px;
font-weight: bold;
text-align:center;
background-image:url(linksrechts.png); background-repeat:no-repeat;
}

Zwischen dem linken und rechten Balken also der Text-Container:

#content {
font-size:12px;
width:63%;
height:auto;
float:left;
background-color: #FFFFCC;
padding:18px;
text-align:justify;

}

Und schlussendlich der rechte Balken:

#menurechts { float:right;
width:15%;
height:1000px;
background-image:url(linksrechts.png); background-repeat:no-repeat;
padding:6px;
}


Folgendes Problem nun:

Die Balken sind, wie ihr im Code erkennen könnt, immer 1000px lang - dabei ist die Länge des Text-Containers irrelevant.
Dies soll aber nicht so sein - die Balken sollen immer genau so lang sein wie der Text-Container.

Da der Text-Container jedoch nicht immer gleich hoch ist, kann man für die Höhe der Balken natürlich keinen festen Wert angeben.

Mit "height: 100%" bei den Balken hatte ich auch keinen Erfolg.
Dann sind die Balken nämlich nur so lang wie der Inhalt in den Balken - ist also ganz falsch.

Könntet ihr mir, verständlich, erklären wie ich nun vorzugehen habe?

 

[Maik]

Erstelle eine Grafik, die die drei Spalten optisch simuliert und verwende sie in einem übergeordneten Parent-DIV als Hintergrundgrafik, die vertikal wiederholt wird. So besitzen die drei Spalten, unabhängig von ihrem Inhalt, immer die gleiche Höhe.

 

[Miami Vice]

Das heißt aber, dass Text-Container und die beiden Balken die gleiche Hintergrundgrafik besitzen müssen, oder?

 

[Maik]

<div id="wrapper">
    <div id="menuleft">...</div>
    <div id="content">...</div>
    <div id="menurechts">...</div>
</div>

Die Hintergrundgrafik wird für das DIV #wrapper verwendet und erstreckt sich somit über die drei Spalten.

 

[Miami Vice]

Werde mich heute mittag mal ransetzen und es probieren - sollte es nicht klappen, poste ich nochmal den neuen Code - denke ihr entdeckt Fehler sicher schnell.

Vielen Dank übrigens für die (schnelle) Hilfe.

 

[Maik]

Anschauungsmaterial zu der Technik findest du von mir in dem Thread div height=100% nur im IE?:

1. http://www.tutorials.de/forum/1223592-post13.html
   
2. http://www.tutorials.de/forum/1274347-post15.html

 

[Miami Vice]

Danke.

Aber eine Sache habe ich noch nicht so ganz verstanden.
Die Grafik soll die 3 Spalten ja "optisch simulieren" - wird diese Grafik im Browser also nicht angezeigt, richtig?

 

[Maik]

Doch doch, die Hintergrundgrafik wird vom Browser dargestellt, denn sie enthält ja in den genannten Beispielen die Hintergrundfarben der jeweiligen Spalten.

Nachtrag: ich weiss nicht, was die von dir verwendete Grafik linksrechts.png darstellt (Farbe, Muster), aber du kannst sie ja mit in die Hintergrundgrafik einfliessen lassen, und im mittleren Bereich die gewünschte Hintergrundfarbe für den Text-Container definieren.

 

[Miami Vice]

Klappt bisher nicht.

#wrapper {background-image:url(linksrechts.png); background-repeat:repeat-y;
}

<div id="wrapper">
<div id="menuleft">...</div>
<div id="content">...</div>
<div id="menurechts">...</div>
</div>

Hat sich rein gar nichts geändert.

 

[Maik]

Hab dir mal eine Basis-Vorlage incl. Hintergrundgrafik erstellt und hänge sie als ZIP-Datei an.