views:

207

answers:

3

IE6 drives me nuts.

The following HTML works fine in every post-millenial browser except IE6. The right hand div scrolls to show the table. In IE6 the table bursts out of the size constraints of the div.

Can some kind genius please tell me what I have to do to get IE6 to respect the width of this div and scroll like a good browser?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
   <head>
   </head>
    <body>
     <div style="float:left;width:200px;">Leftist</div>
     <div style="float:left;width:500px;">
      <div style="overflow-x:scroll;border:1px solid red;">
       <table width="1000px" border="1">
        <tr>
         <td>1111111111111111111111111111111111111111111111111111111111111111111111111111</td>
         <td>2222222222222222222222222222222222222222222222222222222222222222222222222222</td>
         <td>3333333333333333333333333333333333333333333333333333333333333333333333333333</td>
         <td>4444444444444444444444444444444444444444444444444444444444444444444444444444</td>
        </tr>
       </table>
      </div>
     </div>
    </body>
</html>
+1  A: 

Add a width to the div containing the table, i.e. the div with the overflow-x:scroll style attribute set

Neal Donnan
All 3 answers the same but yours first. Thanks!
Damo
+3  A: 

Change your inner div style to this:

<div style="overflow-x:scroll;border:1px solid red;width:500px;">

Note the width specification. Make sure you have the overflow and width attributes on the same element.

recursive
A: 

Just add width:100% to the red div.

<div style="overflow-x:scroll;border:1px solid red;width:100%;">
Delameko
Hmm, usually get a js popup saying there are new answers, so I don't post the same answer 15 minutes late. Apologies.
Delameko