469,909 Members | 1,741 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,909 developers. It's quick & easy.

div positioning and margins

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
Jul 20 '07 #1
1 1770
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.
Jul 20 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Tom Szabo | last post: by
9 posts views Thread by Bryan R. Meyer | last post: by
8 posts views Thread by Bryan R. Meyer | last post: by
1 post views Thread by FDYocum | last post: by
12 posts views Thread by Secret Guy | last post: by
1 post views Thread by David Dorward | last post: by
4 posts views Thread by Alan Silver | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.