Set position absolute and margin

Question

I would like to set an element's position to absolute and have a margin-bottom, but it seems that the margin-bottom doesn't have an effect.

HTML:

<div id='container'></div> 

CSS:

#container {   border: 1px solid red;   position: absolute;    top: 0px;   right: 0px;   width: 300px;   margin-bottom: 50px; // this line isn't working } 

Answer 1

I know this isn't a very timely answer but there is a way to solve this. You could add a "spacer" element inside the element positioned absolutely with a negative bottom margin and a height that is the same size as the negative bottom margin.

HTML:

<div id="container">     <div class="spacer"></div> </div> 

CSS:

// same container code, but you should remove the margin-bottom as it has no effect  // spacer code, made it a class as you may need to use it often .spacer {     height: 50px;     margin: 0 0 -50px 0;     /* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */     background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */ } 

Answer 2

Building upon Joey's answer, for a cleaner markup, use the CSS :after-selector to add a spacer for the desired bottom margin.

CSS

#container:after {     position: absolute;     content: "";     bottom: -40px;     height: 40px;     width: 1px; }