Horizontal Scrolling with absolute positioning inside relative positioning

[colin]

Hi, I have a similar problem to with this example...

http://dustyreagan.com/writing/1/example2.html

When the page is shrunk horizontally, (but not so much as to cover the contents)
it creates a horizontal scroller.
If the red box is removed, this scroller is not seen.

Anyway to get rid of the scroller until it is actually needed?

Thanks

[kpac]

You're better off not using absolute positioning at all on a centered layout.

[colin]

Can you recommend anyway of replicating that page without absolute positioning?

Thanks

[kpac]

Where do you want to box to be exactly?

[colin]

Basically, a large box positioned centrally on the screen.

Then I need images within it to be fixed at certain positions within it.
So when the browser is stretched, the large box remains in the centre.

I'm sure its possible, but I don't know how.

Thanks for any help.

[kpac]

I assume when you say "large box" you're talking about the red box? Or is it the #wrapper div?

[colin]

Yes, the large box is the #wrapper div.

The small ones would be images, like the red box is, which I require to be at specific positions within the large box, such as (x,y), where (0,0) is the top left corner.

[kpac]

Okay.

This is the code which I'm wondering about:

Code: [Select]

<div style="position:relative;top:30px;left:200px">
<img src="sample.gif" style="position:absolute" height="50" width="100" alt="our img" />
Remove that <div> and just add the style it has directly to the image. Leave the "position:absolute" on the image, and forget about relative positioning for now - that might be affecting the parent <div>'s style.

[colin]

Thanks,

Well if I do that...

http://www.math.colin-java.co.uk/test.htm

It half works, but I don't seem to be able to position the image at (x,y)
If I try to, it just does it relative to the corner of the screen..

Any thoughts?

[kpac]

Yes, all you do now is set your "top:20px", "left:50px" etc. on the image. That should do it.

[colin]

It doesn't, it just puts it at the position relative to the top left corner of screen,
which is of no use.

It sort of works if I set it to relative, but then I can't get multiple images to show properly

[Rob Pomeroy]

Absolute positioning is fine on a centred layout, providing the outer div/container has its position set to relative.  Then inner content can be set to absolute, but it's absolute relative to its parent container.  Yes I know it's counter-intuitive...