Home >Web Front-end >CSS Tutorial >Why Do My 100% Width Tables Not Extend Properly in IE9 When Using `overflow:hidden` and Floated Elements?
Why Do My 100% Width Tables Not Extend Properly in IE9 When Using `overflow:hidden` and Floated Elements?
- Mary-Kate OlsenOriginal
- 2024-12-13 09:26:10593browse
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:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="container">
<div class="sidebar">
<img src="dsfd.jpg" height="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>
</body>
</html>
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!