Probleme mit Div-Größe

[thwfreak]

Hallo,

ich habe folgendes Problem:
Da ich eine graue Hintergrundfarbe hinter meiner Seite haben möchte, hatte ich zuerst den body "eingefärbt". Allerdings war dann auch meine Druckvorschau grau (ich verwende Joomla! 1.5). Dann habe ich die komplette Seite nochmal in einen div gesetzt. Allerdings bekomme ich ihn nicht auf die volle Größe. Ist der Inhalt einer Seite extrem kurz oder der Monitor extrem groß, sodass die Seite kleiner als der Monitor ist, sieht man unten einen weißen Balken. Ist der Monitor kleiner als die minimale Breite der Seite, entsteht rechts ein weißer Balken, da ich die Breite mit 100% definiert habe.

Ein ähnliches Problem tritt bei langen Menüs, aber kurzem Text auf. Dann ist die weiße Fläche kleiner als die blaue dahinter und es entsteht eine hässliche, große blaue Fläche.

Ausschnitt meiner CSS:

div#site {  
	background: #5c5c5c;  
	padding-top: 15px;  
	padding-left: 15px;  
	padding-right: 15px;  
	padding-bottom: 15px;  
	margin: 0px;  
}  
  
div#page {  
	text-align: left;  
	margin-top: 0;  
	margin-left: auto;  
	margin-right: auto;  
	margin-bottom: 0;  
	max-width: 1280px;  
	min-width: 976px;  
	background: #003298;  
}  
  
div#top {  
	text-align: center;  
	margin: 0px;  
	height: 120px;  
	border-bottom-style: solid;  
	border-bottom-width: 3px;  
	border-bottom-color: #ffffff;  
}  
  
div#logo_l {  
	margin-top: 0px;  
	margin-left: 0px;  
	width: 200px;  
	height: 120px;  
	background: url(../images/top_l.jpg) 0 0 no-repeat;  
	border-right-style: solid;  
	border-right-width: 3px;  
	border-right-color: #ffffff;  
	float: left;  
}  
  
div#logo_r {  
	margin-top: 0px;  
	margin-right: 0px;  
	float: right;  
	width: 700px;  
	height: 123px;  
	background: url(../images/logo.png) 0 0 no-repeat;  
	overflow: visible;  
	float:right;  
}  
  
div#unten {  
	margin-top: 0px;  
	margin-bottom: 0px;  
	margin-right: 0px;  
	margin-left: 203px;  
}  
  
div#menu {  
	margin-top: 0px;  
	margin-bottom: 0px;  
	margin-right: 0px;  
	margin-left: -200px;  
	width: 200px;  
	min-height: 400px;  
	background: url(../images/linie.png);  
	background-repeat:no-repeat;  
	background-position: top right;  
	float: left;  
}  
  
div#main {  
	margin: 0px;  
	margin-bottom: -10px;  
	float: right;  
	width: 100%;  
	height: auto;  
}  
  
div#breadcrumb {  
	margin: 0px;  
	background: url(../images/logo_unten.png);  
	background-repeat:no-repeat;  
	background-position: right -1px;  
	padding-left: 5px;  
	padding-right: 150px;  
	padding-top: 5px;  
	padding-bottom: 5px;  
}  
  
div#whitebox {  
	margin-top: 5px;  
	margin-left: 25px;  
	margin-right: 25px;  
	margin-bottom: 25px;  
	background: #ffffff;  
	padding: 15px;  
}  
  
div#message {  
	margin: 0px;  
	padding: 5px;  
	background: #ffffff;  
}  
  
div#component {  
	margin: 0px;  
	min-height: 500px;  
	float: left;  
	width: 100%;  
	background: #ffffff;  
}  
  
div#footer {  
	margin-bottom: 10px;  
	margin-left: auto;  
	margin-right: auto;  
	border-top-style: solid;  
	border-top-width: 2px;  
	border-top-color: #ffffff;  
	width: 500px;  
	text-align: center;  
}  
  
div#footer td {  
	text-align: center;  
}

ich hoffe, ihr könnt mir helfen!
Ich bin mit meinem beschränktem Latein am Ende :-)

lg
Simon