Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
267 views
in Technique[技术] by (71.8m points)

html - IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly

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>
Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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" />

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...