[MrBS]

I haven't been able to figure out something that seems like it should be relatively straight-forward. If it is a simple thing, please just redirect me to a resource explaining this.

Basically, I want to horizontally center a section with css. And I want to be able to move things within that section, again with only css.

For example, I want to be able to have a graphic that's 100 px wide, that will be horizontally centered. I then want another graphic on top of that one, which is 20 px wide between the 30 px and 50 px marks on the first graphic.

If you have an example please post it.

Thanks,
~BS

[Simon Mundy]

Here goes an early-morning stab at it:

[php]

Your stylesheet should have these:

#imgdiv { left-margin: auto; right-margin: auto; width: 100px; }
#placeholder { position: absolute }
#topdiv { position: absolute; top: 0px; left: 30px; }

The code in your page would go something like this:

<div id="imgdiv"><div id="placeholder"><div id="topdiv"><img src="bar.gif" width="20" /><img src="foo.gif" width="100" /></div></div></div>

[/php]

The idea is that the left-margin and right-margin attributes automatically centre an element with a fixed width. The 'placeholder' which has an absolute position without a fixed coordinate tells the 'topdiv' to take its coordinates relative from 'placeholder''s position rather than page top left.

Bear in mind I've written this off the top of my head so it may take some tweaking to get it working right. The top of my head is a strange place and often full of rubbish...

[MrBS]

Originally posted by Simon Mundy:
Here goes an early-morning stab at it:

[php]

Your stylesheet should have these:

#imgdiv { left-margin: auto; right-margin: auto; width: 100px; }
#placeholder { position: absolute }
#topdiv { position: absolute; top: 0px; left: 30px; }

The code in your page would go something like this:

<div id="imgdiv"><div id="placeholder"><div id="topdiv"><img src="bar.gif" width="20" /><img src="foo.gif" width="100" /></div></div></div>

[/php]

The idea is that the left-margin and right-margin attributes automatically centre an element with a fixed width. The 'placeholder' which has an absolute position without a fixed coordinate tells the 'topdiv' to take its coordinates relative from 'placeholder''s position rather than page top left.

Bear in mind I've written this off the top of my head so it may take some tweaking to get it working right. The top of my head is a strange place and often full of rubbish...

Thanks for the help, I figured out the problem with my initial attempt was the browser misrendering though. So I'm back with just the css.

Thanks again,
~BS