nicht angemeldet
Hallo zusammen,
ich habe folgendes Problem: meine Webseite besteht "grundsätzlich" aus einem Header und drei vertikalen Spalten. Die mittlere Spalte soll in ihrer Breite variabel sein (central-fluid Layout). Die rechte und linke Spalte sollten immer bis zum "Boden" des Fensters gehen, und nicht nur auf die Höhe des mittleren Divs. Beim Firefox konnte ich das über min-height erreichen. Wie schaffe ich das bei dem IE? Hier der Code:
hoehe.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hoehe</title>
<link rel="stylesheet" type="text/css" href="hoehe.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="IEHoehe.css"><![endif]-->
</head>
<body>
<div class="minwidth">
<div class="wrapper">
<div class="widetop">Header</div>
<div class="outer">
<div class="wrap-cl">
<div class="left">links
</div> <!-- end left div -->
<div class="center">center
</div> <!-- end center div -->
</div> <!-- end wrap-cl div -->
<div class="right">rechts
</div> <!-- end right div -->
</div> <!-- end outer div -->
</div></div>
</body>
</html>
---------------------------------------------------------------------
hoehe.css
body {
padding: 0;
margin: 0;
background-color:#E3E6E9;
height:100%;
min-height:100%;
}
.clear {
clear: both;
}
/*fuer firefix, fuer IE extra in mainIEhack.css */
.minwidth {
min-width: 800px;
min-height: 100%;
}
.wrapper {
background-color:#E3E6E9;
height: 100%;
}
.widetop {
float:left;
width:100%;
height:6em;
background-color:#CCD2D7;
}
.outer {
margin-left: 170px;
margin-right: 160px;
word-wrap: break-word;
background-color: #FFF;
height:100%;
}
.wrap-cl {
float: left;
width: 100%;
}
.left {
float: left;
position: relative;
width: 170px; /* L */
margin-left: -171px; /* -L-1 */
margin-right: 0px;
}
.center {
float: right;
width: 100%;
}
.right {
float: right;
position: relative;
width: 160px; /* R */
margin-right: -161px; /* -R-1 */
}
---------------------------------------------------------------------
und für IE Hacks: IEhoehe.css
.outer, .wide, h2, .wrapper, .wrap_cl, .minwidth {
height: 0px;
height: auto;
zoom: 1;
}
.incenter {
width: 100%;
margin-right: -10000px;
position: relative;
}
.minwidth {
-border-left: 800px solid #fff; /*hier min-width (incenter) einstellen */
}
.wrapper {
margin-left: -800px; /*hier margin-left dem min-width anpassen*/
position: relative;
}
---------------------------------------------------------------------
Wäre echt total toll, wenn sich einer von Euch Cracks kurz die Mühe geben könnte......!
Gruß Sonja