Home >Web Front-end >CSS Tutorial >Why Do My Tables Appear Below My Floated Element in IE9 When Using `overflow:hidden`?
Why Do My Tables Appear Below My Floated Element in IE9 When Using `overflow:hidden`?
- Linda HamiltonOriginal
- 2024-12-02 12:23:16242browse
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:
<head>
<style>
.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><tr<td>Text</td></tr></table>
</div>
<div class="tholder">
<table><tr<td>Test goes here</td></tr></table>
</div>
<div class="tholder">
<table><tr<td>text</td></tr></table>
</div>
</div>
Solution:
IE9 behavior can be corrected by ensuring the proper header:
<!DOCTYPE html> <html> <head> <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!