Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 24.09.2010, 00:12
icecold icecold ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2010
Beiträge: 5
icecold befindet sich auf einem aufstrebenden Ast
Standard 100% Höhe von Divs klappt einfach nicht.

Hallo,
ich versuche jetzt schon seit vielen Stunden ein Layout zu erstellen.
Habe auch fast alles so hinbekommen wie ich es will außer die Höhe der divs in der Mitte der Seite.
Zur Erklärung:
Oben ein header (feste höhe und 100% breite),
darunter links ein menü (feste breite), mitte der inhalt (variabele breite) und rechts eine weiteres Fenster (feste breite),
und unten ein footer. (feste höhe und 100% breite).

Der Header passt. Der footer passt. Aber ich bekomme es einfach nicht hin das alles in der Mitte die restliche Seite ausfüllt. In Der Breite klappt das. Aber nicht in der Höhe.

Bitte helft mir!
Hier der Code der Seite:

PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="all2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="outer_wrapper">
<div id="wrapper">

<div id="header">
<?php include 'header.php' ?>
</div><!-- /header -->

<div id="container">

<div id="left">
<?php include 'menue.php' ?>
</div><!-- /left -->

<div id="main">
<?php
if($_GET['ac']=='Startseite' || !$_GET['ac'])include 'Startseite.php';
if(
$_GET['ac']=='Wir')include 'Wir.php';
if(
$_GET['ac']=='Kontakt')include 'Kontakt.php';
if(
$_GET['ac']=='Impressum')include 'Impressum.php';
?>
</div><!-- /main -->

<!-- This is for NN6 -->
<div class="clearing">&nbsp;</div>
</div><!-- /container -->

<div id="sidebar">
<?php include 'sidebar.php' ?>
</div><!-- /sidebar -->
<!-- This is for NN4 -->
<div class="clearing">&nbsp;</div>

<div id="footer">
<?php include 'footer.php' ?>
</div><!-- /footer -->

</div><!-- /wrapper -->
</div><!-- /outer_wrapper -->

</body>
</html>
und hier das css:
HTML-Code:
html, body {
height: 100%; /* wichtig */
margin:0px;
padding:0px;
background-color:#FFC;
}

#outer_wrapper {
min-width:740px;
width:100%;
}

#wrapper {

}

#header {
border:1px;
width:100%;
/* the above declaration creates an horizontal scroll bar in IE, this is to get rid of it */
margin:0 -1px;
height:150px;
}

#container {
float:left;
width:100%;
display:inline;
margin-left:-200px;

}

#left {
float:left;
width:150px;
display:inline;
margin-left:200px;
}

#main {
/* the width from #left (150px) + the negative margin from #container (200px) */
margin-left:350px;
background-color:#FFF;
}
/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebar {
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left:100%;
/* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left:-200px;
}

#sidebar p {
    text-align:center;
}

#footer {
position: absolute;
/* see #outer_wrapper  */
width:100%;
/* this is to clear #container */
clear:both;
border-top:1px;
border-bottom:1px;
bottom: 0; /* wichtig */
}
/* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}
Mit Zitat antworten
Sponsored Links