"body" bleibt immer kleiner als "content"-Div

G

Gast170816

Hallo,

ich habe mal wieder ein Layoutproblem. Dabei habe ich schon allen überflüssigen Code rausgeschmissen, um den Fehler einzuengen, aber ich kann partout nicht finden woran es liegt.

Mein Layout hat im "body" ein div "Container" und daraunter eins "footer".
Ich will nämlich im Container (fester Breite) alles zentrieren und der Footer soll komplett über die ganze Breite gehn.

Es scheint auch alles richtig, wenn man das Browserfenster normal groß hat, wenn man es aber in der Breite ganz dünn zusammenschiebt, wird auf einmal der "footer" schmaler als "content". Ich hab gesehen, dass es an "body" zu liegen scheint, denn "body" und "footer" sind gleichermaßen zu schmal.

Ich hab schon verschiedene Sachen probiert, mit "overflow:hidden" "width: 100%" aber irgendwie funktioniert nichts.

Vielleicht kann mal jemand drüber gucken?! Der Code samt CSS liegt unter http://rapidshare.com/files/380824732/testseite.zip.html

Hier mal als Codeschnipsel
HTML
HTML: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Testseite</title>
	<link href="basic.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

  <div id="container">
    <div id="header">
      <h1>Headline</h1>
      <ul>
         <li><a href="#">Eins</a></li>
        <li><a href="#">Zwei</a></li>
        <li><a href="#">Drei</a></li>
        <li><a href="#p">Vier</a></li>
      </ul>     
    </div> <!--header-->
    
    <div id="content">
      <div id="sidebar">
          <p>Sidebar - Bereich</p>    
      </div><!--sidebar-->
      <div id="main"> 
         <p>Main Content - Bereich</p>
      </div><!--main-->
    </div><!--content-->            
  </div> <!--container-->
           
  <div id="footer">
    <div id="footerinfo">
    <p>Footer - Bereich</p> 
    </div>           
  </div> <!--footer-->
          
</body>
</html>


CSS
Code: 
/*------------------- CSS RESET ---------------------
---------------------------------------------------*/
* {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}

ul,
ol {
list-style: none;
}

b,
strong {
font-weight: bold;
}

img,
a img {
border: none;
}

a:link, a:visited {
text-decoration: none;
}

a:hover, a:active, a:focus {
text-decoration: none;
}


/*------------------- FONTS ---------------------
------------------------------------------------*/
body {
font-size: 100%;
}


h1, h2, h3, h4 {
color: #59b4e1;
font-family: "Trebuchet MS", "Times New Roman", serif;
font-weight: bold;
}

p {
font-family: Verdana, Arial;
font-size: 0.7em;
margin-bottom: 1.0em;
color: #828282;
}
 
/*------------------- MAIN LAYOUT ---------------------
-------------------------------------------------*/
 

#container {
margin: 0 auto;
width: 980px;
position: relative;  
border: 1px solid black;
}

#header {
overflow: hidden;
height: 130px;
border: 1px dashed green;
}

#header h1 {
float: left;
}

#header ul {
float: right;
margin-right: 151px;
margin-top: 100px;
}

#header li {
display: inline;
float: left;
margin-right: 25px;
color: #59b4e1;
font-family: "Trebuchet MS", Verdana, Arial;
}

#header li a {
font-weight: bold;
color: #59b4e1;
}

#header h1 a {
width:235px;
height:129px;
display: block; 
text-indent: -1000em; 
z-index: 1000; /* IE Fix*/
}

#content {
margin-top: 20px;
padding: 5px 5px 20px 5px;
width: 980px;
overflow: hidden;
height: 100%;
border: 1px solid red;
}

#sidebar {
float: left;
width: 250px;
border: 1px dashed blue;
}

#main {
float: right;
width: 670px;
border-left:2px solid #EBEBEB;
padding-left:25px;
border: 1px dashed magenta;
}

#footer {
/*height: 100px;*/
background-color: yellow;
color: #fff;
padding: 15px 0 15px 0;
border: 1px solid blue;
}

#footerinfo {
width: 980px;
margin: 0 auto;
overflow: hidden;
height: 100%;
border: 1px solid lightblue;
}

#footerinfo ul{
margin-left: 315px;
}

#footerinfo li a{
color: #fff;
font-family: "Trebuchet MS", Verdana, Arial;
font-size: 0.8em;
}

Und wie gesagt, dass der "footer" zu schmal wird, sieht man erst wenn man das Browserfenster in der Breite ganz schmal macht.
 
Hi,

warum postest du deine Frage im HTML-Forum, wenn hier offensichtlich ein CSS-Problem vorliegt?

Eine Mindestbreite min-width:980px für #footer wird das Problem aus der Welt schaffen.

mfg Maik
 
...entschuldigung, da hab ich jetzt irgendwie falsch gedacht.
Sorry. Du kannst den Thread meinetwegen auch löschen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück