CSS Margin and Absolute property

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;
}

I am not able to understand why setting position to absolute is restricting width of #inner2 div.
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

I expected that my inner1 div should have margin from top as I specified in CSS. But I got something different. Using absolute property fixed this So I wanted to know why ? — Sachin Jain, Aug 17 '12 at 08:22

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

setting position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width if that is the effect you're after..

see this

absolute vs relative position width & height

edited May 23 '17 at 10:24

Community

1
1

answered Aug 17 '12 at 07:33

Usman

3,200
3
28
47

score 1 · Accepted Answer · answered Aug 17 '12 at 07:44

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/

answered Aug 17 '12 at 07:44

abhinav pratap

623
8
15

Hey abhinav, Thanks for your answer. I understood completely the answer of Q1. Can you please explain by saying from document flow inner div never knows it is inside outer div but according to document flow inner div comes in outer div and moreover, why setting border of outer div solves this problem ? please point me to some link atleast...BTW thanks a lot. – Sachin Jain Aug 17 '12 at 08:26
1

@blunderboy, actually this is the case of Collapsing Margin. Here are some links : http://reference.sitepoint.com/css/collapsingmargins, http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php, http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html – abhinav pratap Aug 17 '12 at 09:23

score 0 · Answer 3 · answered Aug 17 '12 at 07:29

0

You should use green div's padding-top property - #inner1 with margin-top set on high value only pushes the whole #outer further down!

answered Aug 17 '12 at 07:29

jOpacic

9,453
12
36
58

CSS Margin and Absolute property

3 Answers3