21.07.2009 um 21:32 Uhr
Hallo,
ich habe ein einfaches 3 spalten layout. Das funktioniert mit firefox 3.0.1 super aber mit IE 6.0 funktioniert das floaten nicht. Was mache ich falsch? Kann mir jemand helfen?
html code:
<body>
<div id="container">
<div id="header" class="highlight">
</div>
<div id="buehne">
</div>
<div id="contentbox">
<div id="content">
<div id="wrapper">
<div id="mainContent">
<h1>Blindtext</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. natis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper n</p>
</div><!-- mainContent -->
<div id="sidebarLeft" class="highlight">
<div id="nav2">
<ul>
<li ><a href="" title="Blindtext">BindtextBindtextBindtext</a></li>
<li ><a href="" title="Blindtext">BlindtextBindtextBindtext</a>
</li>
</ul>
</div><!-- nav2 -->
</div> <!-- sidebarLeft -->
</div> <!-- wrapper -->
</div> <!-- content -->
<div id="sidebarRight" class="highlight">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div> <!-- sidebarRight -->
<div class="clearfloat"></div>
</div> <!-- contentbox -->
</div> <!-- container -->
<div id="footer"></div>
</body>
</html>
css Datei:
/*------------------- 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;
}
/*------------------SCHRIFT / GRSSE ----------------
---------------------------------------------------*/
body {
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
letter-spacing: 0.001em;
color: #60513B;
background: #EFB14B;
background-repeat:repeat-y;
line-height: 17px;
text-align: left;
}
h1,
h2,
h3 {
font-weight: bold;
margin-bottom: 0.7em;
}
h1,
h2 {
color: #ad1910;
}
h1 {
color: #ED9C35;
font-size: 16px;
}
h2 {
font-size: 2.0em;
}
h3 {
font-size: 1.2em;
color: #505862;
}
blockquote {
color: #f18110;
}
.navlink:link,
.navlink:visited {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.navlink:hover,
.navlink:focus,
.navlink:active {
color: #ffffff ;
font-weight: bold;
text-decoration: none;
}
a:link,
a:visited,
a:hover {
color: #9F1E02;
text-decoration: none;
}
a:focus,
a:active {
color: #9F1E02;
text-decoration: none;
}
/*------------------- LAYOUT ---------------------
---------------------------------------------------*/
#container {
width: 100%;
background-color: #ffffff;
border: 0px solid #dcdcdc;
padding: 0px;
margin: 0px auto 0px auto;
}
#contentbox {
width: 927px;
background-color: #ffffff;
border: 0px solid #dcdcdc;
padding: 0px;
margin: 8px auto 0px auto;
}
#header {
width: 927px;
height: 230px;
padding: 0px;
margin: 0px auto 0px auto;
background-color: #f0f0f0;
font-size:93%;
line-height:normal;
}
#navi {
height: 21px;
background-color: #9F1E02;
text-align: center;
padding-top: 3px;
margin: 15px 0px 0px 0px;
}
#navi ul li {
padding: 8px;
background-color: transparent;
display: inline;
}
#content {
background-color: transparent;
padding: 0px;
margin: 0px auto;
width: 927px;
}
#sidebarLeft {
width: 170px;
float: left;
}
#mainContent {
margin: 15px 0px 0px 0px;
float: right;
width: 547px;
}
#wrapper {
float: left;
width: 747px;
}
#sidebarRight {
width: 150px;
float: right;
}
#footer,
.clearfloat {
clear: both;
}
#content p {
margin-bottom: 20px;
}
#footer p {
font-size: 0.9em;
text-align: center;
}
#buehne {
background-color:#444;
clear:both;
height:10px;
width:100%;
}
/*------------------- ALLGEMEIN --------------------
---------------------------------------------------*/
.fl {
float: left;
padding-right: 1em;
}
.fr {
float: right;
padding-left: 1em;
}
.clearfloat {
clear: both;
}