Home/ Questions/Q 6932237
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:40:50+00:00

given the following code <!DOCTYPE html> <html> <head> <title>show stats</title> <style> span.main { position:relative;

  • 0

given the following code

<!DOCTYPE html>
<html>
  <head>
    <title>show stats</title>
    <style>
    span.main {
        position:relative;
        display:inline-block;
    }
    div.stats {
        position:absolute;
        bottom:50px;
        background:black;
        color:white;
        padding:0px 15px 0px 15px;
        font-weight:500;
    }
    </style>
  </head>

  <body>

    <span class="main">
      <img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/>
      <div class="stats">
        <p>this is a caption</p>
      </div>
    </span>
    <span class="main">
      <img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/>
      <div class="stats">
        <p>this is a caption</p>
      </div>
    </span>
    <span class="main">
      <img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/>
      <div class="stats">
        <p>this is a caption</p>
      </div>
    </span>

  </body>

</html>

I want to make div.stats the width of the containing span.main. Setting the width to 100% doesn’t work, because the resulting width exceeds the width of the container by the amount of the padding (30px).

I can fix it by setting the padding of div.stats to 0 and then padding the paragraph inside this div. This seems to work, but I suspect the way I’m doing it is dumb. Is there a cleaner way to position this div across the width of its container, while maintaining its vertical position?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add left:0 and right: 0 to div.stats:

    div.stats {
    position:absolute;
    bottom:50px;
    background:black;
    color:white;
    padding:0px 15px 0px 15px;
    font-weight:500;
    left: 0;       /*Add this*/
    right: 0;      /*Add this*/
}

    JSFiddle: http://jsfiddle.net/sT9vA/1/

    • 0