Question

Ive had quite some problems with positioning elements with CSS related to people using differently sized screens. Whats a bulletproof way to position elements so that they keep their position on the screen no matter how big the viewport is?

Answer 1

We have got 2 simple examples here.

In demo 1, div will always stick to top left of the screen regardless of screen size/resolution.

DEMO 1

<div id="test">This div will always appear on top left by default regardless of screen size.</div>​
#test{ width:150px; height:150px; background-color:#666; }​

This one will always stick to right hand side with some margin

DEMO 2

<div id="test">This div will always appear on right hand with 100 margin.</div>​
#test{float:right; margin-right:100px; width:150px; height:150px; background-color:#666; }​