CODEWITHSUNDEEP
htmlcss
bwbrowning
bwbrowning

Reputation: 6520

Lining up different sized divs through different zoom levels

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?

Upvotes: 0

Views: 109

Answers (1)

MalSu
MalSu

Reputation: 541

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...

Upvotes: 1

Related Questions