Question

Here is an example of what I am doing: http://jsfiddle.net/wFjXD/

At a certain zoom level ( the default on my machine ), the top 2 divs have the same width as the bottom 10.

This is because I set the width in pixels, each small div has a width of 20px and a 1px border. The larger divs have a width of 108 px which makes each long div line up with 5 of the small divs.

The problem is that if you zoom in or out using ctrl + or ctrl – in the browser, all of this changes and the divs will no longer line up.

Is there a css fix to maintain the same relative sizes through different zoom levels?
Or is there another best practice way to accomplish what I am trying to do?

Answer 1

If you want the proportion to stay the same, use % instead of px.
Thats the best I can think of for your problem. Although it’d have to be a fixed number of children and you’d have to wrap them appropriately.

To give you an idea…