Element Positioning affected by Browser Screen Resolution Change

Question

Hello, newbie developer here.

There's this small problem I always encounter. Every time I try to change browser resolution (or what do you call the event when you scroll the mouse wheel while pressing ctrl), some elements (Mostly form elements) get to be shifted down or somewhere else, which does not conform with the original positioning. Im not sure if the problem is with the CSS or the markup itself and Im not really sure if this is much of a problem. Should I ignore it? (It doesn't feel very comfortable though, thinking that it might become problematic in the near future) Otherwise, any solution on how to avoid this?

Simple explanations are very much appreciated, Thanks.

(Perhaps the used term newbie should be replaced with noob?. Haha.)

Answer 1

Ed, it sounds like you are zooming in. The problem you describe occurs when you use absolute dimensions e.g. width: 20px;. To achieve a fluid layout you could use em instead e.g. width: 10em;.

You may find this Making the transition from px to em article useful.