Bottom margin on absolute div

HTML & CSS
1

I’ve got an absolutely positioned div with margins to the left and top - which are fine, but margin-bottom does not work…

This is the style (I have used longhand to try and isolate the problem):

#contentscroll {
margin-bottom: 80px;
margin-left: 410px;
margin-top:80px;
background-color: #fff;
width: 476px;
color: #999999;
position:absolute;
height:auto;
padding-top: 52px;
padding-right: 52px;
padding-bottom: 0px;
padding-left: 52px;
}

I googled it, and it seems absolutely positioned items can have a margin bottom, any ideas why mine doesn’t :(?

2

I don’t know what you expect will happen, but a bottom margin on an absolutely positioned element isn’t likely to have much noticeable effect.

Absolutely positioned boxes are removed from the document flow and do not affect subsequent elements. The margin will simply overlap other content, invisibly.

3

ah - ok, thanks :slight_smile:

So what I have is a a content div which scrolls - but it needs an 80px gap between itself and the bottom of the browser - at the moment it just stops flush to the bottom. The gap needs to be transparent so the background shows

I tried a wrap around the above mentioned div, but that had the same problem.

How else can I achieve this?

4

It depends on the situation-fixed height or no.

If it is not a fixed height you can try this (will not work in IE6);

bottom:80px;

5

No - that doesn’t work as it pushes the top of the div over the top of the screen on small sizes - I think this may have to be a table :shifty:

6

Why does it need to be absolutely positioned ?

7

You are right - it doesn’t :slight_smile:

relative is working, which fixes the problem on all browsers… except ie (surprize :rolleyes:)

8

BTW, you can make your code shorter and simpler:

#contentscroll {
margin: 80px 0 80px 410px;
background-color: #fff;
width: 476px;
color: #999;
padding: 52px 52px 0;
}

height: auto; is assumed, so you don’t need it. Margin and Padding both have shorthand properties - margin is set as top right bottom left, padding is set as top left & right bottom. Color can be short hand if the numbers/letters are the same (#999999 becomes #999, #ee6600 becomes #e60, etc).

9

I know :slight_smile:

(I have used longhand to try and isolate the problem)
Thanks anyway

10

D’oh. Note to self: read better next time.

Although I don’t think long hand would help much, since you can still change the properties in short hand. But whatever helps your work flow :tup:

11

nm… the bottom margin doesn’t seem to be picked up - the other margins work, but not the bottom margin, with relative positioning

This is what I have at the mo:

#contentscroll {
margin-bottom: 80px;
margin-left: 410px;
margin-top:60px;
background-color: #fff;
width: 476px;
color: #999999;
position: relative;
padding: 52px 52px 0;
}
12

Reading back through these posts, I suspect that there is nothing after this div than the closing body tag.In this case the bottom margin on the div will collapse through the bottom of the body. Rather than trying to provide bottom spacing with bottom margin on the div, use bottom padding on the body (or whatever container surrounds the #contentscroll div).

13

Thanks Centauri - I have just figured out it was actually a mistake on my part and I had forgot to close a div tag - sorry for wasting your time :slight_smile:

14