Question

I want to use margin in my code, but I have some problems.
Please look at:

<div id="outer">
<div id="inner1">
    Margin not coming from top (not absolute)
</div>

<div id="inner2">
    Div has absolue prop
</div>

​

And the CSS code is:

#outer {
    margin: 100px;
    background-color: green;
    height: 300px;
    widht: 400px;
}

#inner1 {
    margin: 10px;
    background-color: red;
}

#inner2 {
    position: absolute;
    margin: 20px;
    background-color: blue;
}

​

1. I am not able to understand why setting position to absolute is
   restricting width of #inner2 div.

2. Since #inner1 div does not have absolute property, it is not having
   margin from top. I can’t understand this. Please explain.

Here is output: jsFiddle

Answer 1

Ques1: I am not able to understand why setting position to absolute is restricting width of inner2 div.

setting position to absolute of inner2 div, gets the width auto so as long as text.
setting position to relative of inner2 div, gets the width of outer div.

So if you want absolute positioning, set also the width of inner2 div.

Ques2: Since inner1 div does not have absolute property, it is not having margin from top. I can’t understand this. Please explain.

from the document flow, your inner div never know it is inside some other div (outer), setting border or position to absolute of outer div fix this.

fiddle http://jsfiddle.net/C7dE2/20/