If we have a float div A and div B with overflow: hidden next to it - div B should take all the free space next to the floated div. And if we have the minimum width set on div B, and the window size is too small to hold these two divs on the same line - div B should wrap under div A and take the entire available width of the parent. This is the exact behavior that we see in all major browsers except IE8, even IE7 handles it as expected. In IE8, when the size of the window is small enough, so div B wraps itself under div A - div B, not accepting all available width, but only has a minimum width. The question is, is this a bug or standard behavior? If this is a mistake, how can we get around it?
I have a test case: http://jsfiddle.net/BJM4s/2/ , resize the window to see it in action.
HTML:
<div class="parent"> <div class="A"> <img src="http://placekitten.com/g/100/100 " /> </div> <div class="B"> float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float </div> </div>
CSS
.parent { overflow:hidden; margin: 20px; border: 1px solid; } .A { float:left; margin-right: 10px; } .B { overflow:hidden; min-width: 200px; background: lime; }
source share