CODEWITHSUNDEEP
csshtmlmargin
Gradislava Bikkulova
Gradislava Bikkulova

Reputation: 331

margin bottom doesn't want to work

I have an "outside" div which takes 100% of the page. With a higher z-index value, I have an "inside" div. I don't know why but margin-bottom doesn't seem to work with this "inside" div.

My code is:

<style type="text/css">

#inside{
    background-color:#f8f8f8;
    position: absolute;
    top:0;
    left:20%;
    width:60%;
    margin-top:35px;
    margin-bottom:35px;
    z-index:3;
    border-radius: 7px;
    box-shadow: 6px 6px 20px black; 
}


#outside{
    position: fixed;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity:0.7;
    z-index:2;
    background-attachment:fixed;
}
</style>

<div id="outside"></div>
<div id="inside">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

here a fiddle: http://jsfiddle.net/malamine_kebe/EnHut/

Upvotes: 0

Views: 3783

Answers (3)

Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

Try this:

#inside{
    background-color:#f8f8f8;
    position: relative;
    top:0;
    left:20%;
    width:60%;
    margin-top:35px;
    margin-bottom:35px;
    z-index:3;
    border-radius: 7px;
    box-shadow: 6px 6px 20px black; 
}

It is your position — you're using absolute, and the element don't know where it is to give margin at the bottom.

To see the difference between relative and absolute, just click here.

And here is the resolution of the problem in practice. (FiddleJs)

Upvotes: 0

Scottzozer
Scottzozer

Reputation: 126

Simple solution:

Change position to relative http://jsfiddle.net/EnHut/2/

#inside{
  background-color:#f8f8f8;
  position: relative;
  top:0;
  left:20%;
  height: 700px;
  width:60%;
  margin-top:35px;
  margin-bottom:35px;
  z-index:3;
  border-radius: 7px;
  box-shadow: 6px 6px 20px black; 
}

Upvotes: 1

Omega
Omega

Reputation: 3038

Change position: absolute; to position: relative; for #inside

http://jsfiddle.net/EnHut/1/

Upvotes: 1

Related Questions