Layout Problem (div bis unten ziehen)

ChrisKringel · 15 August 2009

Hallo ertsmal der Code der seite: Index.html

HTML:

<!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="style.css" rel="stylesheet" type="text/css" />
<title>Homepage</title>
</head>

<img id="background" src="background.jpg" alt="Hintergrund"/>


<div id="center-div">
    <div id="logo">
        <img src="logo.png" alt="Logo" />
    </div>
    
    <div id="navigation">
        Navigation
    </div>
    
    <div id="content">
        <h2>Willkommen</h2>
 </div>
    
    <div id="sidebar">
        Sidebar
    </div>
    <div style="clear:both" />
</div>

<body>
</body>
</html>

und die style.css

HTML:

@charset "utf-8";
/* CSS Document */
html
{
    height: 100%;
}

body
{
    height: 100%;
}

#background
{
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

#logo
{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}

#navigation
{
    position: relative;
    height: 50px;
    width: 100%;
    background-image:url(150.png);
    background-repeat: repeat;
    -moz-border-radius-topright: 20px;
    -khtml-border-radius-topright: 20px;
}

#content
{
    position:relative;
    float: left;
    width: 600px;
    background: url(100.png);
    background-repeat: repeat;
    margin-bottom: 0px;
}

#sidebar
{
    /*position:relative;*/
    background-image:url(150.png);
    background-repeat: repeat;
    margin-bottom: 0px;
    width: 200px;
    float: right;
}

#center-div
{
    margin:0px;
    padding:0px;
    position:relative;
    width: 800px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-left: -400px;
    left: 50%;
}

#footer
{
    position: relative;
    margin-top: -2em;
}

/** html  #center-div
{
    height: 100%;
}*/

So nun zum Problem: Die Seite befindet sich in einem Container von 800px breite. Dieser soll unter allen umständen bis zum Ende der Seite gezogen werden, mindestens aber bis zum Ende des Browserfensters. In diesem Container sind (von oben nach unten) mehrer DIVs: Das Logo Die Navigation und dann links ein bereich für Content und rechts eine Sidebar Der Content und die Sidebar sollen nun bis zum Ende des Containers gezogen werden. Das hatte ich eigentlich mit "Margin-bottom: 0px" vor, aber irgendwie läuft das ned... Vllt. fällt euch ja was auf =) MfG Chris

Imbericle · 15 August 2009

Code:

min-height: 100%; !important
height: 100%; <!-- fuer Inet explorer der kennt das andere net -->
padding:0px;
margin:0px;

für den äußersten Container

MfG

Layout Problem (div bis unten ziehen)

ChrisKringel

Neues Mitglied

Imbericle

Blogger

Neueste Beiträge