Trouble Aligning Divs

Hi all,

I recently left tables behind as much as possibly. Larger on the advice and rants of many reputible members here. I'm currently at the first stadges of a new website and I'm having trouble align the DIV's corect. I may have miss undestood something.

My example is here: http://bpt.madcapsule.com/

On screens that are 800x600 the layout is ok but if you have a larger screen size or make your browser window bigger however then the grey divs that hold a picture and spec of a trainer (make sense when you see the site) travel left, breaking out of the design. I'm using...

position: absolute; top:nnpx; left:nnpx;

to align in and obviously its taken the left very literally, and pulls to left when window is made bigger. I wanted it to be held within its master div so that it cant break out. Did I miss something here?

If anyone can provide any information that would be much appreciated.
Many thanks
Sir P! :D

Did I miss something here?

Yes, you missed to position the all wrapping container div relative. The absolute position is relative to the next absolutely or relatively positioned parent element. So, currently left is counted from the viewport edge while if you position the parent of that absolutely positioned element relative (as this will leave it within the regular flow of elements) the absolute position is counted from the edge of that parent element, not the viewport.

its that simple!

Many thanks Stephen. That will prove most useful.