# DIV Breite bei übergroßem Inhalt (IE BUG)



## schamahn (6. März 2005)

Hi,

hat jemand für das folgende Problem einen Workaround:

<table width="100%">
<tr>
 <td>

  <div style="overflow:auto;width:100%">
     <table width="3000">
       <!--[irgendeininhalt]-->
     </table>
  </div>

 </td>
 <td width="200">[Leisten_inhalt]</td>
<tr>
</table>

Problem hier ist folgendes: 
Das Div positioniert sich im IE richtig und hat
100% Breite, wenn es jedoch Inhalte mit übergroßer
Breite beinhaltet, wird es um die entsprechende Breite
vergrößert, trotz dem overflow:auto, weil der IE
rechnerisch die Seitenbreite auf den größten Inhalt
anpasst und somit width="100%" dann immernoch 
zutrifft. 

Firefox & Co zeigen es richtig an.

Kennt jemand hierfür einen Workaround ?


----------



## versuch13 (6. März 2005)

> <table width="3000">
> <!--[irgendeininhalt]-->
> </table>


 Ja, keine Ahnung, liegt es vielleicht daran?


----------



## schamahn (6. März 2005)

nein.
Die Tabelle ist viel breiter als der div, das ist gewollt.
Bei einem div kann der tag overflow:auto eingesetzt werden, dann
wird der "überstehende" Inhalt mit Scrollbars versehen.
Das funktioniert in der Theorie auch im IE, in der Praxis allerdings
nur, wenn der div eine fixe Breite hat, z.b <div style="width:800px">
nicht jedoch wenn er auf width="100%" gesetzt ist, dann rechnet
der IE nämlich die Breite der großen Tabelle als Breite des 
Dokuments und skalliert den div auf 100%, eben dann auf 3000px und 
das ist natürlich Käse.

Für dieses Problem brauche ich einen Workaround.


----------



## Maik (6. März 2005)

Hallo schamahn,

das Workaround ist eine PX-Weite für das (horizontal) scrollfähige DIV-Element und die verschachtelte Haupt-Tabelle. 

Demo-Source:

```
<html>
<head>
<title></title>

<style type="text/css">
<!--
table.main
{
width: 800px;
border: 1px solid #006699;
}

td.scroll
{
width: 600px;
height: 50px; /* optional */
border: 1px solid #006699;
/* IE SCROLLBARS */
scrollbar-base-color: #ffffff;
scrollbar-3d-light-color: #ffffff;
scrollbar-arrow-color: #006699;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #006699;
scrollbar-shadow-color: #006699;
scrollbar-track-color: #ffffff;
}

td.fix
{
width: 200px;
border: 1px solid #006699;
}
-->
</style>

</head>
<body>

<table class="main">
 <tr>
  <td class="scroll">

  <div style="overflow:auto;width:600px;height:50px;">
   <table width="3000">
    <tr>
     <td>scroll content starts here</td>
    </tr>
   </table>
  </div>

  </td><!-- td.scroll END -->

  <td class="fix">[Leisten_inhalt]</td>
 <tr>
</table>

</body>
</html>
```
Browsercheck: IE (5.5), Mozilla (1.6), NN (7.0), Opera (7.23)


greez, maik.l


----------

