DIV ist zu lang - was tun?

Liebe Forumsgemeinde,
die Seite, die ich betreue, hat einen kleinen Schönheitsfehler, und zwar ist das div "wrapper" viel zu lang. Wenn ich aber für "wrapper" zum Beispiel eine Maximalhöhe angebe, wird das Browserfenster nicht kleiner, sondern es kommt nur mehr Hintergrund zum Vorschein. Ich möchte aber, dass "wrapper" nur so hoch ist, dass sowohl Navigation als auch Contentbereich bündig abschließen und gleichzeitig ein angenehmer, nicht übergroßer Abstand zum Text gewahrt bleibt und ein Abstand von 20px unterhalb des Wrappers. Weiß jemand, wo mein Problem liegt? Danke schon mal im Voraus!
Ich nutze übrigens die "faux columns"-Methode.
Dies ist die Seite: klick. Und hier die CSS:

Code:

@charset "utf-8";

/* CSS Document */

* {	margin: 0;
	padding: 0;
}

@font-face {
  font-family: 'Graublau Web';
  src: url(GraublauWeb.otf);
}

@font-face {
  font-family: 'museo300';
  src: url(museo300regular.otf);
}

body {
	text-align: left;
	background:  #ff4913 url('../bilder/background.jpg') repeat;
	color: #000;
}

h1 {
	  font-family: 'museo300';
	  font-size: 26px;
	  line-height: 44px;
	  border-bottom: 1px dashed;
}

h2 {
	font-family: 'museo300';
	  font-size: 20px;
	  line-height: 44px;
}

p {
	font-family: 'Graublau Web';
	font-size: 15px;
	margin-bottom: 20px;
	text-align: justify;
}

a {
	color: #ff4913;
	text-decoration: none;
}

a:hover {
	color:#F90;
	background-color:#FFC;
}

a:visited {
	color: #8b0000;
}

img {
	border: 1px solid #ff4913;
}

.right {
	float: right;
	margin-top: 4px;
	margin-left: 10px;
	margin-bottom: 20px;
	font-family: 'museo300';
}

#wrapper {
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 1000px;
	border: 1px solid #ff4913;
	position: relative;
	background: #fff url('../bilder/wrapper.png') repeat-y;
}

#header {
	width: 1000px;
	height: 560px;
	background: url('../bilder/header.png') top center no-repeat;
	}
	
#content {
	top: -320px;
	margin-left: 290px;
	margin-right: 22px;
	position: relative;
}

#linkbox {
	margin-top: -10px;
	margin-bottom: -15px;
	margin-left: 7px;
	margin-right: 4px;
	padding: 5px;
	border: 3px solid #ff4913;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	font-family: 'museo300';
	background-image: url('../bilder/transparent.png');
}

#linkbox li {
	margin-left: 15px;
	list-style-type: circle;
	list-style-position: outside;
	color: #ec4913;
	font-style: italic;
	font-size: 15px;
	background: none;
}

#linkbox a {
	color: #ec4913;
}

#navi {
	posititon: relative;
	width: 206px;
	margin-top: -550px;
	margin-left: 60px;
	margin-right: 10px;
	background-color: #fff;
	float: left;
}

#logo {
  margin-left: auto; 
  margin-right: auto;
  background: url('../bilder/logo.png') top center no-repeat;
  width: 133px;
  height: 200px;
  position: relative;
}

#navi_list {
	margin: 20px 0;
	padding: 0;
	width: 206px;
	list-style: none;
	position: relative;
}


#navi_list li {
	margin-left: 3px;
	padding-top: 18px;
	padding-bottom: 2px;
	padding-left: 60px;
	width: 194px;
	height: 35px;
	background: url('../bilder/button.png') no-repeat;
	font-family: 'museo300';
	font-size: 18px;
}

#navi_list a {
	color: #000;
	text-decoration: none;	
}

#navi_list a:hover {
	background: none;
}

 

Die Seite lässt sich nicht aufrufen:

 

Bitte noch mal laden, ich hatte gerade Probleme mit dem Server.

 

Ich kann nichts Auffälliges an der Seite feststellen. Poste mal einen Screenshot von dem Fehler. Bei welchem Browser passiert das?

 

Hallo Kalweit,
da es ja "nur" ein Schönheitsfehler ist, ist es natürlich nicht sonderlich auffällig, aber sicher siehst du auch, dass unterhalb des Textes noch mehr als 300px (vertikal) weiße Fläche sind - schöner wären aber maximal 50px.
Der Fehler tritt beim Firefox und Internet Explorer 8 auf, die anderen Browser habe ich noch nicht getestet.

Im Internet Explorer tritt übrigens noch ein anderer Fehler auf - Ich habe ja erstmals Webfonts verwendet (frei verwendbare wohlgemerkt - ich will ja keinen Stress bekommen). Während im Firefox beide verwendeten Fonts korrekt dargestellt werden, gilt dies im IE nur für einen der beiden Fonts, obwohl beide das gleiche Dateiformat haben. Wenn ich bei einzelnen CSS-Elementen den nicht-funktionierenden Font durch den anderen austausche, wird das Element korrekt mit diesem anderen Font dargestellt. Für Anregungen bin ich dankbar!

 

IMO kommt die Verschiebung aus der Höhe des #header. Die anderen Elemente hast du ja nachträglich "hingemogelt". Ich würde den Code nach

Code:

<div id="header"></div>
<div id="wrapper">
...
</div>

umbauen (musst natürlich alles neu positionieren).


Bei der Schrift vermutet meine Glaskugel (hab's auf die Schnelle nicht geprüft), dass die mit dem Leerzeichen nicht funktioniert. Wenn ja, hast die Ursache des Problems.

 

Hallo kalweit,
dein Tip war Gold wert. So funktioniert jetzt alles bestens. Das Problem mit den Schriften ist nun auch gelöst - bei Schriftartbezeichnungen mag der IE im CSS offenbar keine Kleinschreibung...
Vielen Dank noch mal für die schnelle Hilfe,
Daina