Fluid layout in CSS doesn't keep proportions

Question

Im trying to build a fluid layout in CSS with percentages instead of pixels. I want it so that if the user tries to zoom in on the website, all internal proportions should stay the same.

Right now, when I zoom in, the text grows out of the drivs and the layout breaks.

I'm using a wrapper and three columns which has about 30 percent in width each.

Since this is sort of a layout problem, I've posted the entire layout on JSBin. The problem is apparent there as well. When you zoom in, the internal proportions break and the text grows out.

http://jsbin.com/zerewuto/1/

Anyone got any ideas how to fix this?

Answer 1

In top of your css add:

* { box-sizing: border-box; }

This makes the box model calculate paddings and borders inside of the box. It's best to use when working with relative measures. (Or always)

EDIT: Forgot to mention. The reason the layout breaks is because of margins. At a point they + the percentage becomes more than 100%.

Consider a page that is 100px wide only. Then each 10px margin would be equal to 10%.

Lycka till!

Answer 2

You could try to add word-break: break-all to your CSS.

I would like to warn you that Liquid / Fluid layouts do not prescribe the use of percentage values for everything as this can easily cause display problems like this.

Use pixel values and percentage values reasonably to achieve a robust liquid design.