CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-7
Ahungry
Ahungry

Reputation: 3

IE7 parent div auto-applying clear:both to div closing tag

given the following code:

<!doctype html>
<div style="position:relative;border:1px solid red;width:500px;overflow:visible;">
<div style="height:200px;border:1px solid orange;float:right;">test</div>
</div>
stuff

Every browser other than IE7 (and IE8 in IE7 compatibility) displays this properly, however in IE7 the parent div automatically expands to the height of the floated child.

Is there any way to disable this "feature" so that I can have a floated div go beyond the parent's closing tag?

Upvotes: 0

Views: 273

Answers (3)

Kyle Undefined
Kyle Undefined

Reputation: 776

You could target IE7 using the * CSS hack. Try this: http://jsbin.com/ufoqo5/2/edit

Upvotes: 0

Briguy37
Briguy37

Reputation: 8402

One option is if you know the desired height of the parent, you can specify it in the parent div. For example, in your case: 

<!doctype html>
<div style="position:relative;border:1px solid red;width:500px;overflow:visible; height: 0px;">
<div style="height:200px;border:1px solid orange;float:right;">test</div>
</div>
stuff

Here's a fiddle to test.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

You have to prevent your outer div from obtaining hasLayout.

Certain things force hasLayout, and width: <anything other than "auto"> is one of them.

(Your original code for comparison: http://jsfiddle.net/T6QsS/)

For instance, removing the width works in IE7: http://jsfiddle.net/T6QsS/1/

To use width, you must add it to an extra wrapper element: http://jsfiddle.net/T6QsS/2/

Upvotes: 1

Related Questions