Why Do My 100% Width Tables Not Extend Properly in IE9 When Using `overflow:hidden` and Floated Elements?

IE9 Float Issue: Overflow:Hidden and Table Width 100%

In a web layout, you encounter a peculiar problem where tables with 100% width fail to extend properly alongside a floated container on the right. This issue manifests itself exclusively in Internet Explorer 9. To rectify this, it's crucial to ensure that your page header is configured correctly.

The workaround for overflow:hidden in Internet Explorer involves adding the following header:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>


<div class="container">
<div class="sidebar">
<img  src="/static/imghwm/default1.png" data-src="dsfd.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Why Do My 100% Width Tables Not Extend Properly in IE9 When Using `overflow:hidden` and Floated Elements?" >
</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>

By implementing this header, you can ensure that your layout behaves consistently in Internet Explorer 9, displaying the tables extending properly alongside the floated container.

The above is the detailed content of Why Do My 100% Width Tables Not Extend Properly in IE9 When Using `overflow:hidden` and Floated Elements?. For more information, please follow other related articles on the PHP Chinese website!