Element Positioning affected by Browser Screen Resolution Change

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开发者_JS百科 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.)

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.

Ed, perhaps you can also go for max-width and min-width in your css to avoid that. focusing on the resolution lets say 1024 x 768 . you can use min-width for both your columns that at point below this resolution it won't skip downwards. Let me know if that helped