✔ Div Höhe passt sich nicht an

ZeroEnna · 6. September 2007

Hallo zusammen

Ich habe ein Layout das wie folgt aufgebaut ist:
Das div Content enthält zwei weitere divs, nähmlich navigation und post_container.
Der post_container enthält noch einmal einzelne divs mit den Posts. In den Posts ist dann der schlussendliche Text.

Jetzt habe ich das Problem, dass sich weder der Hauptkontainer (content) den Höhen von navigation und post_container, noch die Posts der Höhe des Textes anpassen.

Ich habe hier im Forum schon zwei Ansätze gefunden (clearFix und Tutorial zu 100% Höhe) aber keiner hat funktioniert.

Könnt ihr euch das mal anschauen. Eventuell findet ja jemand von euch den Fehler:

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" />
    <script type="text/javascript" src="fix.js"></script>
    <title>Untitled Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
        }
        
        body {
            background-image: url(images2/bg.gif);
            background-attachment: fixed;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        
        body, a {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10pt;
            color: #000000;
        }
        
        h1 {
            margin: 0;
            padding: 5px 0px 12px 0px;
            font-size: 12pt;
        }
        
        #top {
            background-image: url(images2/top_bg.gif);
            background-repeat: repeat-x;
            width: 100%;
            height: 53px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        #content {
            display: block;
            background-image: url(images2/content_bg.gif);
            background-repeat: repeat-y;
            width: 796px;
            min-height: 100%;
            height: 100%;
            position: absolute;
            left: 50%;
            margin-left: -398px;
            top: 0;
            z-index: 2;
        }
        
        #navigation {
            display: block;
            background-image: url(images2/head_navi.gif);
            background-position: top;
            background-repeat: no-repeat;
            width: 207px;
            height: 100%;
            min-height: 100%;
            float: left;
        }
        
        #post_container {
            display: block;
            background-image: url(images2/head_content.gif);
            background-position: top;
            background-repeat: no-repeat;
            width: 589px;
            height: 100%;
            min-height: 100%;
            float: left;
        }
        
        #breadcrumbs {
            color: #FFFFFF;
            font-size: 8pt;
            margin-top: 88px;
            margin-bottom: 20px;
            margin-left: 20px;
        }
        
        #breadcrums a {
            color: #FFFFFF;
            font-size: 8pt;
            text-decoration: none;
        }
        
        #post_container .post {
            display: block;
            width: 532px;
            clear: both;
            float: none;
            margin-left: 20px;
            margin-bottom: 5px;
        }
        
        #post_container .post .top {
            width: 532px;
            height: 16px;
            background-image: url(images2/post_top.gif);
            background-repeat: no-repeat;
        }
        
        #post_container .post .bottom {
            width: 532px;
            height: 19px;
            background-image: url(images2/post_bottom.gif);
            background-repeat: no-repeat;
        }
        
        #post_container .post .content {
            width: 532px;
            height: 16px;
            background-image: url(images2/post_bg.gif);
            background-repeat: repeat-y;
            min-height: 200px;
        }
        
        #post_container .post .content .inner {
            width: 489px;
            margin-left: 21px;
            padding-top: 3px;
        }
        
        #bottom {
            background-image: url(images2/bottom_bg.gif);
            background-repeat: repeat-x;
            width: 100%;
            height: 53px;
            position: fixed;
            top: 100%;
            margin-top: -45px;
            left: 0;
            z-index: 3;
        }
        
        #powered {
            color: #FFFFFF;
            font-size: 8pt;
            position: absolute;
            left: 15px;
            top: 23px;
        }
        
        #powered a {
            color: #FFFFFF;
            font-size: 8pt;
        }
        
        #copyright {
            color: #FFFFFF;
            font-size: 8pt;
            width: 150px;
            position: absolute;
            left: 100%;
            margin-left: -115px;
            top: 23px;
            overflow: hidden;
        }
        
        #bottom_middle {
            background-image: url(images2/bottom_middle.gif);
            background-repeat: no-repeat;
            width: 796px;
            height: 45px;
            position: absolute;
            left: 50%;
            margin-left: -398px;
            top: 0;
        }
        
        .clearfix:after {
            content: "."; 
            display: block; 
            height: 0; 
            clear: both; 
            visibility: hidden;
        }
        
        .clearfix {display: inline-block;}
        
        /* Hides from IE-mac \*/
        * html .clearfix {height: 1%;}
        .clearfix {display: block;}
        /* End hide from IE-mac */
    </style>
</head>

<body>
    <div id="top"></div>
    <div id="content" class="clearfix">
        <div id="navigation"></div>
        <div id="post_container">
            <div id="breadcrumbs">Home</div>
            
            <div class="post">
                <div class="top"></div>
                <div class="content">
                    <div class="inner">
                        <h1>Lorem ipsum Interdam esse deleatuer</h1>
                        
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex 
                        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor 
                        sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.<br /><br />
                        
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex 
                        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor 
                        sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. 
                    </div>
                </div>
                <div class="bottom"></div>
            </div>
            
            <div class="post">
                <div class="top"></div>
                <div class="content">
                    <div class="inner">
                        <h1>Lorem ipsum Interdam esse deleatuer</h1>
                        
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex 
                        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor 
                        sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. 
                    </div>
                </div>
                <div class="bottom"></div>
            </div>
            
            <div class="post">
                <div class="top"></div>
                <div class="content">
                    <div class="inner">
                        <h1>Lorem ipsum Interdam esse deleatuer</h1>
                        
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex 
                        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor 
                        sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. 
                    </div>
                </div>
                <div class="bottom"></div>
            </div>
            
            <div class="post">
                <div class="top"></div>
                <div class="content">
                    <div class="inner">
                        <h1>Lorem ipsum Interdam esse deleatuer</h1>
                        
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex 
                        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor 
                        sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. 
                    </div>
                </div>
                <div class="bottom"></div>
            </div>
        </div>
    </div>
    <div id="bottom">
        <div id="bottom_middle"></div>
        <div id="powered">Powered by <a href="http://www.wordpress.org">Wordpress</a></div>
        <div id="copyright">&copy; 2007 xy</div>
    </div>
</body>
</html>

Gruss
ZeroEnna

Maik · 6. September 2007

Hi,

wenn ich das richtig überblicke, hast du folgendes vergessen, damit die modernen Browser die nachfolgende height-Deklaration übergehen, die für den IE bestimmt ist:

Code:

#content {
  display: block;
  background: url(images2/content_bg.gif);
  background-repeat: repeat-y;
  width: 796px;
  min-height: 100%;
  height:auto !important;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -398px;
  top: 0;
  z-index: 2;
}

ZeroEnna · 6. September 2007

Hi

Funktioniert leider nicht. Mit der eingefügten Zeile bricht das Layout völlig zusammen.

Gruss
ZeroEnna

Maik · 6. September 2007

Die Zeile wird aber für die modernen Browser benötigt, und bei mir fällt da auch nichts zusammen.

Maik · 6. September 2007

Ansonsten versuch es mal hiermit:

Code:

#content {
  display: block;
  background: url(images2/content_bg.gif);
  background-repeat: repeat-y;
  width: 796px;
  min-height: 100%;
  height:auto !important;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -398px;
  top: 0;
  z-index: 2;
}

#navigation {
  display: block;
  background-image: url(images2/head_navi.gif);
  background-position: top;
  background-repeat: no-repeat;
  width: 207px;
  min-height: 100%;
  height:auto !important;
  height: 100%;
  float: left;
}

#post_container {
  display: block;
  background-image: url(images2/head_content.gif);
  background-position: top;
  background-repeat: no-repeat;
  width: 589px;
  min-height: 100%;
  height:auto !important;
  height: 100%;
  float: right;
}

ZeroEnna · 6. September 2007

Hi

Hab den Fehler gefunden. Nachdem ich etwas in die Navigationsspalte eingefügt habe, funktioniert das Layout einwandfrei. Nur wenn die Navigationsspalte leer ist, funktioniert das Layout nicht. Aber damit kann ich leben.

Vielen Dank für deine Hilfe.

Gruss
ZeroEnna

✔ Div Höhe passt sich nicht an

ZeroEnna

Erfahrenes Mitglied

Maik

ZeroEnna

Erfahrenes Mitglied

Maik

Maik

ZeroEnna

Erfahrenes Mitglied

Neue Beiträge