div Height Auto brace problem (ie and FF compatible)

Turn from:

Http://hi.baidu.com/%B9%F9%E8%B40110/blog/item/130a6d253bdcba0b4c088def.html

Http://www.xnwai.com/?tag=ie%E4%B8%8Eff%E4%B8%ADdiv%E8%87%AA%E5%8A%A8%E6%92%91%E5%A4%A7%E7%9A%84%E9%97%AE%E9%A2%98

Today's typesetting page again encountered this problem, before this can be written: height:auto!important; height:200px; min-height:200px, but today how to die, also do not know how to do, the Internet check, the original to add a Overflow:hidden div, remember to put height:200px, remove, or IE6 will be redundant content hidden away. Try, can, (*^__^*) Xi hee ... Keep working on it!

Min-height is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE does not recognize this, and it actually uses the width as the minimum width to use, IE6 set the height and width, when the content is exceeded when the div will automatically support large. Min-width to IE7 and FF works, the best way is to write: height:auto!important; height:200px; Min-height:200px;overflow:hidden in this way, whether it is in the IE6,IE7 or FF under the effect, that is, the content does not exceed 200px when the div display 200px height, beyond the automatic braces.

--------------------------------------------------------------------------------------------------------------- ------------------

See Example:

<style type= "Style/css" > head{width:980px; height:100px: #66FF33; Background-color content{; Background-color: #FFFF00; }. left{float:left; width:200px height:300px; margin-left:50px; Background-color: #99FFFF; right{float:left; width : 200px; height:300px; margin-left:50px; Background-color: #FF33FF;} foot{width:980px height:100px background-color: #330000;} </style> <div class= "Head" > </div> < div class= "Content" > <div class= "left" > </div> <div class= "right" > </div> </div> < div class= "Footer" > </div>

Csdn to see a person to ask this question.
The problem is: The following code in IE can be the desired effect, content (div) will be automatically propped up, but under the FF content (DIV) will not be propped up.
In fact, I was in the beginning of the Web page I have encountered this problem.
The parent element cannot be adaptive to the child element height in non-ie browsers.
The first thing we need to know here is that. The parent element of float is not defined it does not automatically compute the height by default.
And you need to add a secondary element and define the Clear:both;
In this way. Success in big content but footer disappeared.
Final Solution. As follows:

<style type= "Style/css" > head{width:980px; height:100px: #66FF33; Background-color content{; Background-color: #FFFF00; overflow=auto;} . left{float:left; width:200px height:300px; margin-left:50px; Background-color: #99FFFF; right{float:left; width : 200px; height:300px; margin-left:50px; Background-color: #FF33FF;} foot{width:980px height:100px background-color: #330000; clear{clear:both;} </style> <div class= "Head" > </div> <div class= "Content" > <div class= "left" > </div> <div class= "right" > </div& Gt <div class= "Clear" > </div> </div> <div class= "Footer" > </div>

Add attribute overflow:auto/* To force parent element to fit the height of child elements within the content master container only
As for clear only the floating elements on both sides of the.

Problem solved:)

Note: Div#clear plays an important role in it.