Need advice on the best way to position a z-index <div>

The <div> keeps moving depending on screen size!

[JackR]

I've only been learning css for a week and I've come up against an annoying problem:

<div id="myClock" style="position: absolute; left: 1057px; top: 90px; height: 15px; width: 130px; padding: 0px; z-index: 1"><script src="liveclock.js" type="text/javascript"></script></div>

... places the date in the perfect place in IE7 at 1920x1200. If I resize the screen or change resolution, etc it appears somewhere else. I realise this has something to do with absolute vs. relative positioning but any pointers would be VERY gratefully received!

[Xapti]

Almost never will you have to use relative positioning (with actual coordinates. using it by itself to establish containing block status is fine and common), and absolute positioning is something you should resort to only when other methods cannot accomplish it.

Websites should be FLUID design, meaning no matter what screen resolution (within a realistic range), monitor, DPI setting, or font size the user has, it should flow nicely, and be legible.
Absolute positioning makes this hard to do easily in many cases. It can also sometimes require javascript, which is something certain users or browsers have disabled.

When learning about HTML and CSS, try learning about floats. There are many tutorials on the web which deal with them, including information here at webmasterworld.

The reason absolute positioning can be problematic is that it overlaps virtually everything else... it has no flow. It's sort of like putting a post-it note over something. This can make it difficult to put things underneath, on top of, or beside, without having overlapping parts, or gaps between the elements, due to content size differences or font size differences.
Another thing is that if you're mixing absolute positioning with normal (static) positioning and floats (optional), then the absolute positioning will paste at whatever it's location is designated (I assume you know how that works... it can count pixels like you had there, or can do percentage of it's ancestor), and overlap everything else though, because it's completely mindless... like i said: It has no flow.

Just guessing on what you want (you never specified very well),floating the item to the right, at the top of your container, may get the effect you want. Also, if you establish "containing block" of one of it's ancestors, you could try coordinates right:0, instead of left:x. The problem with that remains that it still will overlap everything.

Here is some useful reference from the people that essentially dictate how HTML and CSS should work:
[w3.org...]
[w3.org...]
[w3.org...]

Previous and next chapters also have useful information

[edited by: Xapti at 11:44 pm (utc) on July 24, 2007]