div Boxen springen aus der "großen box"

[Homwer]

Hallo,
ich bekomme gerade das kotzen.
Ich versuche ein css layout zu bauen, was soweit auch klapt.
Ich verwende 4 boxen,

#box als große darin sind dann, titel als Header und menü und content.

die #box hat eigentlich einen rahmen und der soll gerne alle anderen boxen einschließen.
klapt aber leider nicht.

http://mam.makeamillion.de

da gibts das auch zum anschauen.

#box {
	
	width:760px;
	margin:0px auto;
	text-align:left;
	border:1px solid #000000;
}


#title {
height:34px;
padding:5px;
border-bottom:1px solid #000;
}
#left {
background-color:#bdbec6;
width:128px;
float:left;

}

#content {
border:1px solid #efeff7;
background-color:#efeff7;
width:610px;
float:right;
padding:10px;

}

 

[Homwer]

http://www.aspnetzone.de/blogs/juer.../04/21/100prozent-hoehe-bei-divs-mit-css.aspx

bingt die Antwort

html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}

war die Lösung

 

[SpiceLab]

http://www.aspnetzone.de/blogs/juer.../04/21/100prozent-hoehe-bei-divs-mit-css.aspx

bingt die Antwort

html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}

war die Lösung

Veto! Die Lösung geht vielmehr in diese Richtung, da du den Umfluß von #left und #content nicht ordnungsgemäß mit der clear-Eigenschaft abgebrochen hast, was zum Überlappen der Mutterbox an deren unteren Rand führt:

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Ein Blick zuvor in den in der Themenübersicht Wichtig markierten Thread CSS FAQ hätte dir direkt die Antwort geliefert, und dieses Thema erübrigt, das hier in der Vergangenheit schon zig mal erörtert wurde.

Du kannst ja in deinem "Notnagel" den Inhalt mal entsprechend erweitern, damit er die Viewporthöhe (= 100%) überschreitet, und schauen, wie sich dann #box verhält.