div positioning and margins

[Harris Kosmidhs]

Hello. I tried making a div a2 inside a div a1.

I wanted to place div a2 at bottom right of the div a1. Here's the code
(it's only a test & experimental page that's why I don't post a url)

<style type="text/css">
#a1 {width:300px;height:400px; position:relative;background-color:#ccc;}
#a2 {
width:100px;
height:150px;
bottom:0;right:0;
position:absolute;
background-color:#fff;
}
</style>
[..snip]

<div id="a1">
<div id="a2">
hello
</div>
lalala
</div>
It works well. I still can't find where in the w3c specs says why a1
SHOULD be position:relative (if omitted a2 acts as the container is the
viewport).

No what if I want to position div a2 at the bottom and center of a1?
Usually to center a div I use margin: 0 auto 0 auto;

If I have
#a2 {
width:100px;
height:150px;
bottom:0;
margin: 0 auto 0 auto;
position:absolute;
background-color:#fff;
}
the desired effect isn't happening. Seems margin:auto works when
position is relative right? any way to center the a2 at the bottom of a1?

Thanks
Harris

[Ben C]

On 2007-07-20, Harris Kosmidhs <hk******@remove.me.softnet.tuc.grwrote:

Hello. I tried making a div a2 inside a div a1.

I wanted to place div a2 at bottom right of the div a1. Here's the code
(it's only a test & experimental page that's why I don't post a url)

<style type="text/css">
#a1 {width:300px;height:400px; position:relative;background-color:#ccc;}
#a2 {
width:100px;
height:150px;
bottom:0;right:0;
position:absolute;
background-color:#fff;
}
</style>
[..snip]

<div id="a1">
<div id="a2">
hello
</div>
lalala
</div>
It works well. I still can't find where in the w3c specs says why a1
SHOULD be position:relative (if omitted a2 acts as the container is the
viewport).

CSS 2.1 Section 10.1.4

No what if I want to position div a2 at the bottom and center of a1?
Usually to center a div I use margin: 0 auto 0 auto;

If I have
#a2 {
width:100px;
height:150px;
bottom:0;
margin: 0 auto 0 auto;
position:absolute;
background-color:#fff;
}
the desired effect isn't happening. Seems margin:auto works when
position is relative right? any way to center the a2 at the bottom of a1?

You need to give it

left: 0
right: 0

as well

This is explained in 10.3.8 of the spec although it's a bit of a
mouthful.