DIV problem...

[sweenster]

i normally use position:absolute to position DIV's on an XHTML page which works ok.

Now, i'm trying to include one XHTML page inside another using the PHP include() command.

Trouble is, that instead of being contained inside it's own DIV, the absolutley positioned elements appear x pixels from the left and y pixels from the top of the page rather than from the top of the <div> in which they are enclosed.

Any ideas? I never could get my head round all these div positioning commands...

[me']

On the containing div, you need position: relative to 'reset' the positioning co-ordinates.

[sweenster]

nice one.

on a related topic -

how do you center-align a page with relative <div>'s??

as an example look at:

http://www.whatsinmypocket.co.uk/main.php

you'll see that everything hangs to the left (if you view it on 1024x748 res or above). how could i get this aligned so that it will center on the page??

[me']

Wrap it with another div, then use the negative margin trick on that:

div#everything {
  width: 700px; //for example
  position: absolute;
  left: 50%;
  margin-left: -350px; //half of width
}

On a related point, you shouldn't have to do this: technically you could just use body as that should just act like another div. However, guess which browser has viewport problems if you do that