....und verstehe nicht, wieso der weisse untere Bereich breiter wie der Header-Bereich ist. Meiner Meinung nach habe ich beiden die Breite von 900px zugewiesen...*grübel*
http://www.buecherlaube.de
(Die hübsch-hässlichen pinken Ränder sind nur für mich zum Gucken noch, die kommen später weg... ;-) )
Code
#wrapper {margin:0 auto;width:900px;margin-bottom:20px;border:1px solid; border-color:pink;}
#wrapper #header {clear:both;height:100px; width:900px;background:url(images/body_top.png) bottom left no-repeat; overflow:hidden;margin-bottom:20px;border:1px solid; border-color:pink;}
#wrapper #main {clear:both;overflow:hidden;width:900px; padding:5px 10px; background:#ffffff url(images/body_middle.png) top left repeat-y;margin-bottom:20px;border:1px solid; border-color:pink;}
#wrapper #footer { color:#5e5e5e;clear:both;overflow:hidden; width:900px; padding: 20px 30px 10px 20px; background:#e7e7e2 url(images/body_bottom.png) top left no-repeat;margin-bottom:20px;border:1px solid; border-color:pink;}
#header #logo { width:200px; float:left;border:1px solid; border-color:pink;}
#ueberschrift {width:350px; font-size:34px; float:left;border:1px solid; border-color:pink;}
#header #nav {width:300px; float:right;border:1px solid; border-color:pink;}
#header #nav .pages, #header #nav .pages * {margin:0; padding:0;list-style: none;}
#header #nav .pages { float:right; margin-top:18px;}
#header #nav .pages li {display:inline; float:left; margin-right:5px;}
#header #nav .pages li a:link, #header #nav .pages li a:visited, #header #nav .pages li a:active {color:#426372;font-size:14px;height:34px;line-height:34px;padding-right:10px;}
#header #nav .pages li a:hover {color:#5d6061;background:transparent url(images/navbg.png) repeat scroll top right;float:left}
#header #nav .pages li a:hover span {background:transparent url(images/navbg.png) repeat scroll left top;display:block;}
#header #nav .pages li.current_page_item a:visited,#header #nav .pages li.current_page_item a:active,#header #nav .pages li.current_page_item a:link {background:transparent url(images/navbg.png) repeat scroll top right;color:#5d6061;float:left}
#header #nav .pages li.current_page_item a:visited span,#header #nav .pages li.current_page_item a:active span,#header #nav .pages li.current_page_item a:link span {background:transparent url(images/navbg.png) repeat scroll left top;display:block;}
#header #nav .pages li a:link span, #header #nav .pages li a:visited span, #header #nav .pages li a:active span {padding-left:10px;}
#main #mittelteil {width: 900px; height: 200px; border:1px solid; border-color:pink;}
#main #mittelteil #jugend {float:left; width: 290px; height: 160px; margin-top:20px; margin-bottom:20px;border:1px solid; border-color:pink; text-align: center;}
#main #mittelteil #thriller {float:left; width: 290px;height:160px;margin-top:20px; margin-bottom:20px; border:1px solid;border-color:pink; text-align: center;}
#main #mittelteil #liebe {float:left; width: 290px;height: 160px;margin-top:20px; margin-bottom:20px; border:1px solid;border-color:pink; text-align: center;}
#main #content { width:650px; float:left;margin-bottom:20px;border:1px solid; border-color:pink; }
#main #sidebar {width:230px; float:right;line-height:18px;border:1px solid; border-color:pink;}
#footer .left { float:left; width:45%; margin-bottom:20px;border:1px solid; border-color:pink;}
#footer .right { float:right; width:45%; text-align:right; margin-bottom:20px;border:1px solid; border-color:pink;}