Search code examples
htmlcsspositionmargin

Margin-right broken on width 100%

I have a DIV containing an image and a second DIV. The parent DIV is set to position: absolute; the child DIV is set to position: relative. The idea is that I display my photo caption on top of my image.

The child DIV should have 100% width of the parent, minus 10px on the left, right and bottom, plus a black background.

.article-container {
  position: relative;
}

.photo-caption {
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
<div class="span15 article-container">
  <img src="images/example-image-1.png" />
  <div class="photo-caption">This is the subtitle text on top.</div>
</div>

The left margin bumps .photo-caption outside the bounds of .article-container. The right margin doesn't seem to have any effect.

I've also tried fixing this with box-sizing. It seems to get the width of .photo-caption down to the parent width but there's still the overhang.

Solution

  • An absolutely positioned element is positioned with top, left, right and bottom, not with margin.