✔ Höhe von DIV definieren

[dadiscobeat]

Hallo,

hab ein Template erstellt mit Div-Containern und diese mit CSS formatiert. Nun stellt sich mir die Frage, wie soll ich die Höhe des DIV-Containers für den Content definieren ? Ich brauch eine Mindesthöhe.
Habe ich nun mehr Content als in den Container reinpasst, wird dieser über den Container geschrieben. Beim IE wird der Container automatisch größer, beim Firefox allerdings nicht und der Content geht über den Container drüber.

Zweites Problem. Ich habe links und rechts 2 Spalten die dann auch nicht mehr der Höhe entsprechen und diese werden dann kürzer dargestellt.

Kann mir hier jemand weiterhelfen bitte ?

Gruß

 

[Gumbo]

Mit der CSS-Eigenschaft min-height lässt sich eine Mindesthöhe festlegen. Für das zweite Problem könnte der in dem Artikel „Faux Columns“ beschriebene Trick eine Abhilfe schaffen.

 

[dadiscobeat]

Erstes Problem gelöst ... vielen Dank !

Beim zweiten hab ich leider Schwierigkeiten, da mein englisch auch nicht das beste ist.
Könnte mir da bitte vielleicht jemand weiterhelfen ?

Gruß

 

[Gumbo]

In dem oben erwähnten Artikel werden die Spalten über eine Hintergrundgrafik visualisiert. Anschließend werden die entsprechenden Elemente darauf positioniert.

 

[dadiscobeat]

Super danke ! Haut wunderbar hin ...

Gruß

 

[dadiscobeat]

Das mit der min-height haut leider doch nicht hin.
Gibts da noch ne andere Möglichkeit ?

Gruß

 

[Gumbo]

Wie ist denn das Template aufgebaut bzw. wie sieht das Layout des Templates aus?

 

[dadiscobeat]

Das Layout sieht so aus. Im ersten Content Container ist noch ein zweiter der für eine 1px Haarlinie da ist. Da ich dort eine Haarlinie als Rahmen benötige

 

[Gumbo]

Probier mal folgende Kombination:

#container {
	border:			1px solid #f80;
}
#head {
	clear:			both;
	border-bottom:		1px solid #f80;
}
#menu {
	float:			left;
	width:			20%;
}
#content {
	min-height:		20em;
	margin-left:		20%;
	border-left:		1px solid #f80;
}
#foot {
	clear:			both;
	border-top:		1px solid #f80;
}

<div id="container">
	<div id="head">Kopf-Container</div>
	<div id="menu">Menü-Container</div>
	<div id="content">Inhalt-Container</div>
	<div id="foot">Fuß-Container</div>
</div>

 

[dadiscobeat]

Ich hab grad dies hier gefunden.

Funktioniert min-height denn mit dem IE ?

http://www.greywyvern.com/code/min-height-hack

Gruß