10

I am trying to float a container on the right hand side of the page. To the left of it are a lot of tables that I need to be 100% width. I want them to go extend all the way to the floating element on the right. When that element on the right ends I want the tables to extend to the end of the page.

This works great in every browser except IE. In IE all the tables display below the floated element on the right. I know there's a workaround for overflow hidden in IE but I can't get it to work.

Code below.

<head>
<style type="text/css">
.container{margin:0 auto; min-width:1000px; max-width:1200px;}
.sidebar{float:right;width:300px;margin-left:5px;}
.tholder{overflow:hidden;}
</style>
</head>
<div class="container">
<div class="sidebar">
<img src="dsfd.jpg" heigh="600" width="295">
</div>
<div class="tholder">
<Table width="100%" border="1"><tr><td>Text</td></tr></table>
</div>
<div class="tholder">
<Table width="100%" border="1"><tr><td>Test goes here</td></tr></table>
</div>
<div class="tholder">
<Table width="100%" border="1"><tr><td>text</td></tr></table>
</div>
</div>
C R
  • 2,182
  • 5
  • 32
  • 41
Weldon Johnson
  • 163
  • 3
  • 11
  • Not sure if that is a typo or not but the height attribute on the image is missing a 't'. Post a fiddle if you can. – Jared Apr 24 '12 at 20:39

1 Answers1

17

When something works in other browsers but not in IE9, chance is that your header isn't correct. Check with this one :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 1
    The day I found it (while digging MS documentations) was a revelation for me : now making web applications is a pleasure again as they work the same for Chrome, FF and IE9 :) – Denys Séguret Apr 25 '12 at 19:33
  • 1
    i didn't bother to figure out what it means. I just know it works. thanks again – Weldon Johnson Apr 26 '12 at 04:22
  • 1
    My site was totally broken in IE9 and I was struggling to understand why. Your answer helped me out tremendously. One simple line of code(meta), but unbelievable results.... THANKS SO MUCH! – AKKAweb Jul 30 '12 at 12:56
  • 3
    WOW!!!! This is truly a revelation and I will ENGRAVE it on the front step of my house and TATOO it on my chest. AMAZING! – AKKAweb Jul 30 '12 at 13:01
  • 5
    @CaboONE Can we have the picture of the tatoo now ? – Denys Séguret Aug 11 '12 at 06:57
  • I had the same problem but adding the doctype and meta tag didn't help. What actually fixed my problem is adding this to the css html { font-size: 100% } Hope it helps someone just in case. – Rexy Hoang Jul 17 '13 at 08:56