CODEWITHSUNDEEP
cssmargincss-position
hh54188
hh54188

Reputation: 15626

The absolute position element's margin have no effect if it is in another absolute position element?

I have two div like:

<div class="outer">
    <div class="inner"></div>
</div>

then I give them style like:

    .outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%;}
    .inner{ background:red; position:absolute; margin:0 11px; width:100%; height:80px;}

I want the "inner" in "outer" ,as well the left and right have both 11px space,but it can't be achieve,only the left have the 11px gap,the "inner" seems always have the same length as the father's length

Then I think maybe setting the outer padding with 11px will be work.However ,it still doesn't work……

Why this happened?So how can I solve this problem?Is that possible with the effect?

Here is the only case

Upvotes: 2

Views: 7153

Answers (2)

ifaour
ifaour

Reputation: 38125

The margins will add up to the width which is already stretched to the outer DIV by (width 100%) what you can do is the following - link:

.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%; padding: 0 11px}
.inner{ background:red; height:80px;}

Upvotes: 2

Nikita Rybak
Nikita Rybak

Reputation: 68006

Removing position: absolute; (or changing it to relative) and width: 100%; from .inner will give you exactly what you want. Then, if you really need an element with position: absolute; inside, put it in .inner.

An example

Upvotes: 0

Related Questions