css - Content cropped when browser's zoom changes

Question

When I zoom out on Chrome, the content of my website gets cropped off. Here is a screen shot of what I mean.

I can't find a solution to this. Is there even one? I read about changing sizes to ems and tried that but that didn't fix it. Hope someone can help.

This is the link I'm talking about but there are more pages with the same issue http://wardrobeicons.com/the-icons-update/elle-ferguson-perfect-wardrobe-5/

Answer 1

It is this part that causes the crop I think.

#content.weekly-update #magazine {
  border: 1px solid #ccc;
  height: 580px;
  overflow: hidden;
}

As a quick fix you can increase the height value too 600px or more.

Or drop the floating layout, use CSS table layout instead for example - it has one of the greatest features of equal height on the cells.