Position with DIV

feel confused about it

[timaer]

I just put some very simple code to learn how to use div position.But I found something confused me.

<div id="container" style="width:700px;margin:0 auto;border:1px solid black;">

<div id="sub1" style=" margin-left:20px;border:2px solid red;width:400px;height:200px ">

</div>

</div>

I tried to replace the "margin-left" with "margin-top"and "margin-bottom" it all worked well.But when I tried to use"margin-right",it just refused to do that.
Suppose I need to easily put the "sub1"div on the rightmost of the "container",I just can't do that.

could you help me?

Thanks

[Don_Hoagie]

Well, there are several ways to position elements using CSS... margin is not really one of them.

There are precise (to the pixel) orientation attributes in CSS:

top
left
right
bottom

This is one way to position, and to me it makes the most sense if you're just getting into CSS.

<div id="sub1" style="position: absolute; top: 0; right: 20px; border:2px solid red; width:400px; height:200px;">

This would put your "sub1" div at the top-most pixel, and 20 pixels in from the right-most pixel. Your margin-right command was simply adding 20 pixels of margin bump to the right side of "sub1", which would only have been noticed if you then placed something else to the right of that div. You saw the illusion of positioning when you used things like margin-left because those added margins that happened to "push" the div away from where you assumed it would be... but this does not actually position a div in a certain spot, and that would have become apparent if you went ahead with the rest of your design.

I'm just answering your question... not providing a way to layout your page. There are many ways to do it, all depending on relative and absolute positioning, surrounding elements, etc. You should consult a book or tutorial site that discusses CSS-P. Hope that helps.

[timaer]

Thank you so much.I know more about the"margin" attribute by your careful and patient explanation now.

I've followed your advice to redo my css,in fact I wrote it in Dreamweaver,but I found after I used "postion:absolute;top:0:right:20px"

The two layers was separated in design view,however the "sub1" layer was originally embeded in the"container" layer.Then I just can't position the "sub1" right

I guess that's maybe becouse I used"margin:0 auto" in the "container" layer,so they will be disordered.

[Don_Hoagie]

That has to do with the absolute positioning of the "sub1" div. I marked up the code as "absolute" to show you it in reference to the page... if you want it to be 20px in from the right of the container, and not the page, you will want to to apply position to both your divs, and then position "sub1" relative to the containing div.

As I said, I was really only trying to answer your question about the margins, to help you from getting massively off-track about CSS-P... you should read up on absolute and relative positioning, as well as float and clear properties, before going further with any CSS layout. It's better to read through a CSS positioning tutorial a few times and get a solid understanding than to ask specific questions on a matter like this.

[timaer]

Thanks for your sincere advice again.