Menu
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>
892
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
