How can I add a bottom margin to an absolutely positioned div?

Question

I have a div along the left side of my webpage that expands to varying heights depending on its contents. Sometimes its inner contents causes the div to expand to the bottom of the page. However, I want there to be a margin at the bottom, so it doesn't actually go to the bottom of the page. How can I add the necessary margin? I tried adding margin-bottom:50px to .wrap, but it didn't work.

HTML:

<div class="wrap">Contents</div>

CSS:

.wrap {
    position:absolute;
    top:40px;
    min-width:220px;
    left:0;
}

No, it's not a duplicate. I tried that solution and it doesn't solve my problem. — Nancy Collier, Mar 31 '13 at 21:55

score 0 · Answer 1 · answered Mar 31 '13 at 21:09

0

use bottom:50px; to .wrap div. you positioned div so you can set position by left,right,top,bottom. It will be always 50px up from bottom.

.wrap {
position:absolute;
top:40px;
min-width:220px;
left:0;
bottom: 50px;
}

answered Mar 31 '13 at 21:09

crazyrohila

616
4
9

Thank, but the problem with this is that I don't always want the div to be 50px from the bottom. I just want it to never be closer than 50px from the bottom. – Nancy Collier Mar 31 '13 at 21:50

score 0 · Answer 2 · answered Mar 31 '13 at 22:03

0

I had overflow:hidden; in the class wrap. That was the problem.

answered Mar 31 '13 at 22:03

Nancy Collier

1,469
4
17
21

How can I add a bottom margin to an absolutely positioned div?

2 Answers2