Problem with absolute positioning (CSS)

Hey,

This explains my problem quite good:
http://www.jarilehtinen.net/jari/temp/div.html

I'm using position:absolute to raise div's in top of other elements in
background, which aren't visible here.

DIV's share the same z-index but they still go in top of another. The
problem is, that I can't use "top" and "left" to move those boxes
horizontally, so they'd be nicely tiled side by side.

Is there a way to get those boxes tiled so they won't overlap each other?

Here's the code:

<DIV class="appointment" style="width:100px; height: 100px; position:
absolute; z-index: 1;">
<DIV class="appointmentcontent" style="height: 98px; background-color:
#FFD215;">Should be on LEFT</DIV>
</DIV>
<DIV class="appointment" style="width:120px; height: 50px; position:
absolute; z-index: 1;">
<DIV class="appointmentcontent" style="height: 48px; background-color:
#CCCCCC;">Should be on RIGHT</DIV>
</DIV>

Thanks for help,

--
Jari Lehtinen
http://www.jarilehtinen.net

"Jari Lehtinen" <jari@--no-spam--jarilehtinen.net> wrote

Hey,

This explains my problem quite good:
http://www.jarilehtinen.net/jari/temp/div.html

I'm using position:absolute to raise div's in top of other elements in
background, which aren't visible here.

DIV's share the same z-index but they still go in top of another. The
problem is, that I can't use "top" and "left" to move those boxes
horizontally, so they'd be nicely tiled side by side.

Is there a way to get those boxes tiled so they won't overlap each other?

Here's the code:

DIV class="appointment" style="width:100px; height: 100px; position:
absolute; z-index: 1;"
<DIV class="appointmentcontent" style="height: 98px; background-color:
#FFD215;">Should be on LEFT</DIV
/DIV
DIV class="appointment" style="width:120px; height: 50px; position:
absolute; z-index: 1;"
<DIV class="appointmentcontent" style="height: 48px; background-color:
#CCCCCC;">Should be on RIGHT</DIV
/DIV

Thanks for help,

Hiya,

Not sure why you cannot use 'top' and 'left' in your style, but you
can kind of get round it by using the margin-left css attribute.
Alternatively you can create a parent div wrapper for the inner layer
which contains a spacer image to move the div over to the right.
Really though, you should use left and top, since thats a cleaner
solution

Myke.
www.mykelack.com