example here http://fiddle.jshell.net/5qLQV/5/show/light/ code http://jsfiddle.net/5qLQV/5/

My intention is to have a number of floats in a grid-like system whereby at a desirable width they fill the screen (or my outer container) 100%. When the display/viewport is narrowed, once the floats pass their minimum width then they will start to snap underneath each other.

This works great in chrome/firefox but (guess what) not in IE7! In IE7 you'll see the second float randomly snaps under the first at random widths, just narrowing the browser window will make it jump beside/underneath erratically.

Any thoughts?

cheers :D

2 answers

This was chosen as the best answer

I (sort of) fixed the issue by making one of the floated div's 49.9% width.. I guess there are some rounding issues going on? Any other solutions would be appreciated.

Answered almost 8 years ago by Tabloo Quijico

Thinking aloud here, but I suspect that IE7 isn't able to calculate a width for the container on min and max width's with an html5 doc-type. That or you're triggering a float bug. try adding display:inline to the floated divs and overflow:hidden; to the container and see if it makes any difference. (or try an xhtml strict doctype to enforce standards mode in IE7)

Answered almost 8 years ago by Tony Crockford
  • No difference with the display/overflow attributes.. and I'm a long way from going strict ;) thanks though. Tabloo Quijico almost 8 years ago