Why Do My Tables Appear Below My Floated Element in IE9 When Using `overflow:hidden`?

IE9 Web Page Elements Misalignment: 'Float' Issue with 'Overflow:Hidden' and Table Width

In a web page layout, an attempt to float a container element right while ensuring adjacent table elements extend 100% width faces a display issue in IE9.

Problem:

The tables remain below the floated element, disrupting the desired visual arrangement.

Code:

<style>
.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" heigh="600"    style="max-width:90%" alt="Why Do My Tables Appear Below My Floated Element in IE9 When Using `overflow:hidden`?" >
</div>
<div class="tholder">
<table><tr>Text</tr></table>
</div>
<div class="tholder">
<table><tr>Test goes here</tr></table>
</div>
<div class="tholder">
<table><tr>text</tr></table>
</div>
</div>

Solution:

IE9 behavior can be corrected by ensuring the proper header:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

With this modification, the tables will extend appropriately, aligning properly with the floated element.

The above is the detailed content of Why Do My Tables Appear Below My Floated Element in IE9 When Using `overflow:hidden`?. For more information, please follow other related articles on the PHP Chinese website!