Divs get rearranged when zooming out

When I zoom out from this page my divs get rearranged. Any idea why this is happening?
Thanks in advance.
Sensible Packaging

Are those columns suppose to have big gaps in them?

Looks weird to me even without zooming.

The problem is that you have floated individual boxes left and right and they snag on each other because they are different heights. You should have made just two floated columns and then stacked the boxes in each individual column. That would also solve any issues with zooming as they wouldn’t snag and re-arrange.

Pages always look different when zooming anyway but the multiple left and right floated boxes is a bad method to use.

The big gaps is what I am trying to rid of. Thanks for the advice, I will create the two floated columns like you mentioned and stack the content boxes.

Ah Ok :slight_smile: Yes the 2 floated columns will do the trick nicely.

If you get stuck or need help then just shout.


Everything worked Great! thanks for the tip!