Absolute Html Layout Is Broken When Zooming

I am new to html positioning. I mostly use absolute positioning like: #div { position:absolute; left:50%; top:30%; } When I zoom the page in Google Chrome,layout is broken. All el

Solution 1:

You're using percentages. When you zoom in the percentage is going to be based off the container. If you don't like that then don't use percentages. As you zoom in and out the container is adjusting to a new size and so will the elements in the container. If you want something to be based on a pixel size us px.

You should design your layout so that elements flow and move to new positions as the size of the screen changes. You should read about using @media() in css. Elements you wan't to have move and based on percentage use % and things that you want ridged use px

using @media() will let you make break points in your style so that you can make hard changes depending on different attributes of your container and display. Using different @media() groups to identify different targets for example (phone, tablet, laptop/desktop, tv). You can also set different css depending on display density.

Look into @media(): http://css-tricks.com/css-media-queries/

Look into responsive web design: http://en.wikipedia.org/wiki/Responsive_web_design

ps. people that zoom in or out on a page expect things to not look right. Most of the time they do this on a desktop due to old eyes and expect it to break the style. All they care about in that situation is being able to read the content. I would not put to much stress about how it looks with any other zoom value than 100%. Zooming on a phone or tablet will not have this same effect and should have very little problems with your design. but assuming your going to do responsive design there will be no need for a user to zoom on a phone or tablet. If your user has to zoom on a phone or tablet you did not make a good responsive design.