Div-Höhe - Problem

[DreamweaverMX]

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:1000px;
		float:left;
		background-color: #FFFFCC;
		padding:18px;
		text-align:justify;

}

Und schlussendlich, zur Vervollständigung, 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?

 

[Prophet]

http://seybold.jan-andresen.de/everything.php -> "Dinge, die mit Tabellen besser klappen als mit CSS"

Lesen ;P

 

[DreamweaverMX]

http://seybold.jan-andresen.de/everything.php -> "Dinge, die mit Tabellen besser klappen als mit CSS"

Lesen ;P

Ist es nicht so, dass gewisse Browser mit Tabellen Probleme haben und diese nicht korrekt anzeigen?

 

[Prophet]

Grundsätzlich werden tabellen überall gleich dargestellt. Manche browser interpretieren manche css eigenschaften welche sich auf tabellen beziehen nicht richtig oder gar nicht (cell-spacing ist ein solcher fall) aber grundsetzlich sollten sie kein problem darstellen. Auf jeden fall sind sie für dein vorhaben, wie du mit sicherheit gelesen hast besser geeignet.

 

[DreamweaverMX]

Nun ja, es ist gut möglich, dass es mit Tabellen einfacher geht, aber die Musterseite von hobbyuster läuft auch mit CSS.

Aber bekomme den Code nicht funktionierend in meinen übertragen.

 

[Prophet]

Eine lösung deines Problems wird ebenfalls auf der seite angegeben falls die das nicht aufgefallen sein sollte...

Nimm ein alle drei umschließendes div. Gebe diesem einen Hintergrund der dein layout optisch darstellt und packe drei weitere hinein. Den beiden äußeren weist du breite und float:left/right; zu. Dem mitleren gibt du links und rechte einen margin in breite des jeweiligen seitenstreifens. Schon klappt es einwandfrei.

EDIT: Achja ganz wichtig ist das du ganz zum schluss nach den drei divs aber vor dem schließenden tag des umrahmenden divs folgenden code einfügst:

<div style="clear:both;"></div>

Sonst würden die floatenden divs im falle das das mittlere div kürzer ist über den rahmen gehen...

 

[Artemis]

Oder das hier:
http://jassesnee.de/easyclear/index.html

 

[Prophet]

Netter trick mit dem :after. Aber mich stören die ganzen hack die der am schwanz mitzieht. Da überwiegen für mich die einfache und überall funktionierende version die ich bereits nannte. Auch wenn ich dadurch zugegebenermasen den code aufblähe...

 

[DreamweaverMX]

Nun denn - ich weiß eure Hilfe sehr zu schätzen.

Doch als Programmier-Anfänger ist sowas wirklich alles andere als leicht.

Es geht per CSS - Hobbyuser kann es bestätigen.

Nur denke ich mal, hat keiner Zeit/Lust meinen Code zu vervollständigen/korrigieren.
Ist sicher nur eine Sache von ein paar Minuten - ich sitze schon den ganzen Tag daran...

Naja, kann man nichts machen. Trotzdem Danke. 8) :?

 

[hobbyuser]

Also DreamweaverMX

bei den Musterseiten ist der komplette Quelltext als auch alle CSS Angaben frei einsehbar.
Im Prinzip ist es die Lösung die Prophet vorgeschlagen hat, eine umschließende Div.

Ich verlinke dir hier mal die Musterseiten und lasse sie auch noch einige Zeit online, vielleicht findet sich ja Jemand der dir das in deine Seite einbaut:

Musterseite 1
Musterseite 2

Gruß
Hobbyuser

 

[DreamweaverMX]

Ich verlinke dir hier mal die Musterseiten und lasse sie auch noch einige Zeit online, vielleicht findet sich ja Jemand der dir das in deine Seite einbaut.

Das wäre natürlich genial.

Möge man sich bei mir per PN melden.