[IE6-Bug] Float: right an DIV binden

[blubber02]

Hallo leute ich habe ich Problem mit den IE6.

Alle Browser stellen meine DIV-Container richtig dar, bis aus den IE6.
Das Problem liegt darin, dass die "float: right" Position einer DIV an das Browserfenster gebunden wird.
Wie schaffe ich es die DIV an den überliegenden Container zu binden?

Hier ein Bild was passiert wenn ich die fenstergröße des IE6 verkleinere und dann ganz nach rechts scrolle:
http://www.imagebanana.com/img/lgl9o7ee/ie6.png

Und hier ein Bild wie es aussehen soll:
http://www.imagebanana.com/img/2c60lrt/firefox.png

Code:

<div id="main" class="clearfix">

  <div id="top" class="clearfix">
    <div id="abstandhalter">
      <span>MIDDLE-Abstandhalter für IE6</span>
    </div>
    <div id="banner_1">
         <span>Banner-1</span>
    </div>
    <div id="banner_2">
         <span>Banner-2</span>
    </div>
  </div>
</div>

CSS

<style>
body {
  width: 100%;
  margin: 0px;
}

#abstandhalter {
border: 1px solid;
  width: 969px;
  display: block;
  /*line-height: 0px;*/
}

#main {
border: 1px solid;
  width: 100%;
  min-width: 969px;
  height: auto;
  font-size: 0px;
}

#top {
border: 1px solid;
  width: 100%;
  min-width: 969px;
  height: auto;
  display: block;
}

#banner_1 {
border: 1px solid;
  float: left;
  width: 650px; /***********714***********/
  height: 206px;
}

#banner_2 {
border: 1px solid;
  float: right;
  width: 255px;
  height: 206px;
  clear: right;
}

/*Hintergrund für das linke Menü*/
#middle_1 {
border: 1px solid #FF0000;
  width: 100%;
  min-width: 969px;
  height: auto;
  display: block;
}

/*Hintergrund für das rechte Menü*/
#middle_2 {
border: 1px solid #00FF00;
  width: 100%;
  min-width: 969px;
  height: auto;
  display: block;
}

#left {
border: 1px solid #00FFFF;
  float: left;
  width: 20%;
  min-width: 173px;
  height: auto;
}

#left_abstandhalter {
border: 1px solid;
  width: 173px;
  display: block;
  /*line-height: 0px;*/
}

#left_top {
border: 1px solid;
  width: 173px;
  height: 16px;
}

#left_content {
border: 1px solid;
  width: 173px;
  height: auto;
}

#center {
border: 1px solid;
  float: left;
  width: 55%;
  height: auto;
  clear: right;
}

#right {
border: 1px solid;
  float: right;
  width: 200px;
  min-width: 160px;
  height: 200px;
  clear: right;
}

span {
  font-size: 13px;
  line-height: 15px;
}

/*Clearfix*/
.clearfix:after {
  content: "";
  display: block;
  height: 0px;
  font-size: 0px;
  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>

Ich danke schonmal für die Hilfe.

LG Andreas

 

[Maik]

Hi,

die Ursache des Problems dürfte in den min-width-Regeln (insbesondere für #main u. #top) liegen, die der IE6 nicht interpretiert.

Also muß hier ein Workaround herhalten.

Am einfachsten, weil ohne großen Arbeitsaufwand im bestehenden Code, mittels http://code.google.com/p/ie7-js/.

Ansonsten, wenn Javascript nicht zum Einsatz kommen soll / darf, mit http://www.brunildo.org/test/min-widthS.html.

mfg Maik