Biene: dreispaltiges Layout mit css

Beitrag lesen

Hallo,
ich habe ein dreispaliges Layout mit Css für ein Blog. Im Opera wird es auch richtig dargestellt, nur im IE bringt er alles durcheinander.
Meine CSS sieht so aus:

body{
 background-color: #E9E9E9;
      text-align: center;
 margin: 10px;
 background-image: url(images/bg.gif);
}
#container{
 width: 720px;
 text-align: left;
 margin-left: auto;
 margin-right: auto;
}
#header{
 background-image: url(images/header.gif);
 height: 160px;
 width: 740px;
 background-repeat: no-repeat;
 margin-bottom: 3px;
}
#contentleft{
 float: left;
 width: 150px;
      background-position: top left;
 background-color: transparent;
 padding: 3px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #EFEFFA;
}
#contentright{
      float: right;
 width: 150px;
  background-position: top right;
 background-color: transparent;
 padding: 3px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #EFEFFA;

}
#content{
 width: 370px;

margin-left: 170px;
      margin-right: 85px;
      background-color: #FFFFFF;
 border: 1px solid #d8c2ab;
 padding: 3px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #5e5244;
}
  * html div#content {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}
#titcon{
 background-image: url(images/contentbalken.gif);
 width: 384px;
 height: 20px;
 background-repeat: no-repeat;
 margin-bottom: 3px;
}
.entry{
 background-color: #d8c2ab;
 border-bottom: 2px solid #e5e1db;
 border-right: 2px solid #e5e1db;
 border-top: 2px solid #d8c2ab;
 border-left:  2px solid #d8c2ab;
 margin: 3px 3px 10px 3px;
 padding: 4px;
 color: #EFEFFA;
}
.boxSidebar{
 margin: 3px 3px 10px 3px;
 border:1px solid #d8c2ab;
 background-color: #FFFFFF;
}
.boxSidebarC{
 margin: 3px;
 border-bottom: 2px solid #d8c2ab;
 border-right: 2px solid #d8c2ab;
 border-top: 2px solid #77644d;
 border-left:  2px solid #77644d;
 background-color: #FFFFFF;
 color: #77644d;
 padding: 3px;
}
.divTitle,  .pagetitle{
 background-color: #d8c2ab;
 border-bottom: 2px solid #e5e1db;
 border-right: 2px solid #e5e1db;
 border-top: 2px solid #d8c2ab;
 border-left:  2px solid #d8c2ab;
 margin: 3px 3px 10px 3px;
 padding: 4px;
 color: #EFEFFA;
 text-align: center;
 text-transform: capitalize;
 letter-spacing: 1px;
 font-weight: bold;
}
blockquote{
 margin: 3px;
 border-bottom: 2px solid #d8c2ab;
 border-right: 2px solid #d8c2ab;
 border-top: 2px solid #77644d;
 border-left:  2px solid #77644d;
 background-color: #FFFFFF;
 color: #77644d;
 padding: 3px;
 font-style: italic;
}
.singolocommento{
 margin: 3px;
 border-bottom: 2px solid #d8c2ab;
 border-right: 2px solid #d8c2ab;
 border-top: 2px solid #77644d;
 border-left:  2px solid #77644d;
 background-color: #d8c2ab;
 color: #F2F3FD;
 padding: 3px;
}
.divTitle3, #postcomment, #comments,h3{
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 text-align: left;
 letter-spacing: 2px;
 font-weight: bold;
 color: #F2F3FD;
 background-color: #d8c2ab;
 border-bottom: 1px solid #d8c2ab;
 padding: 2px;
 margin-bottom: 5px;
}
.divTitle2{
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 text-align: left;
 letter-spacing: 2px;
 font-weight: bold;
 color: #d8c2ab;
 background-color: #FFFFFF;
 border-bottom: 1px solid #fffffff;
 padding: 2px;
 margin-bottom: 5px;
 text-transform: uppercase;
}
textarea{
 background-color: #d8c2ab;
 border: 1px solid outset #d8c2ab;
 padding: 2px;
 color: #F2F3FD;
 font-size: 11px;
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 width:98%;
}
input,select{
 background-color: #d8c2ab;
 border: 1px solid outset #d8c2ab;
 padding: 2px;
 color: #F2F3FD;
 font-size: 11px;
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin: 2px 2px 5px 2px;
}
#content a:link, #content a:visited{
 color: #806d55;
 text-decoration: none;
}

#content a:hover{
 color: #F5F5FD;
 text-decoration: none;
 position: relative;
 top: 1px;
 left:1px;
}
#contentleft a:link, #contentleft a:visited{
 color: #d8c2ab;
 text-decoration: none;
}

#contentleft a:hover{
 color: #806d55;
 text-decoration: none;
 position: relative;
 top: 1px;
 left:1px;
 }
#contentright a:link, #contentright a:visited{
 color: #d8c2ab;
 text-decoration: none;
}

#contentright a:hover{
 color: #806d55;
 text-decoration: none;
 position: relative;
 top: 1px;
 left:1px;
}
h2{
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
}
.pside{
 color: #F5F5FD;
 font-weight: bold;
 letter-spacing: 1px;
}
#content ul{
 list-style-image:url(images/ul.gif);
   padding-left: 12px;
  margin-left: 10px;
 line-height: 15px;
 color: #F5F5FD;
}

#contentleft ul{
 list-style-image:url(images/ul.gif);
   padding-left: 12px;
  margin-left: 10px;
 line-height: 15px;
 color: #d8c2ab;
}
#contentright ul{
 list-style-image:url(images/ul.gif);
   padding-left: 12px;
  margin-left: 10px;
 line-height: 15px;
 color: #d8c2ab;
}
.titolino{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 9px;
 color: #FFFFFF;
 text-align: right;
}
.avatar{
 background-image: url(images/avatar.gif);
 width: 50px;
 height: 50px;
 padding: 5px;
 border: 1px solid #FFFFFF;
 margin: 3px;
 float: left;
 background-repeat: no-repeat;
 background-position: center;
}
#wp-calendar{
 width: 130px;
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
 padding: 2px;
 text-align: center;
}
caption{
 color: #d8c2ab;
 border-bottom: 1px solid #d8c2ab;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 2px;
}
th{
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #d8c2ab;
}
td{
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #9e8972;
}

Im Opera befinden sich die drei Spalten neben dem Header auch nebeneinander, im IE leider nicht. Da zeigt er unter dem Header die mittlere Spalte und nach deren Ende dann links und Rechts die beiden anderen Spalten.

--
LG
Biene