Height / Width aspect ratio not working with width: 100% and padding-top CSS trick

Question

.line-score-card {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.325), 0 1px 5px 0 rgba(0, 0, 0, 0.325), 0 3px 1px -2px rgba(0, 0, 0, 0.325);
  width: 100%;
  padding-top: 40%;
  padding-left: 5px;
  padding-right: 5px;
}

.line-score-card .card-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #CCCCCC;
  padding: 4px 0px;
}

.line-score-card .card-row .card-value {
  flex: 1;
  text-align: center;
}

.line-score-card .card-row .card-value.score-total {
  font-weight: 700;
}

<div style="width: 300px">
  <div class="line-score-card">
    <div class="card-row" style="border-top: none;">
      <div class="card-value"></div>
      <div class="card-value">Half 1</div>
      <div class="card-value">Half 2</div>
      <div class="card-value score-total">Total</div>
    </div>
    <div class="card-row">
      <div class="card-value">
        <a href="/stats/teams/UNC/overview"><img src="https://s3.amazonaws.com/cbbteamlogos/UNC-logo.png" style="width: 33px;"></a>
      </div>
      <div class="card-value">44</div>
      <div class="card-value">29</div>
      <div class="card-value score-total">73</div>
    </div>
    <div class="card-row" style="border-bottom: none;">
      <div class="card-value">
        <a href="/stats/teams/DUKE/overview"><img src="https://s3.amazonaws.com/cbbteamlogos/DUKE-logo.png" style="width: 33px;"></a>
      </div>
      <div class="card-value">44</div>
      <div class="card-value">30</div>
      <div class="card-value score-total">74</div>
    </div>
  </div>
</div>

Hi all,

I am having trouble creating a responsive div in the example above. In general, as the wrapper div (the div that sets width: 300px) changes width, I would like for the inner div (with class line-score-card) to maintain a width to height ratio of 2.5 to 1. To (attempt to) do this, I set width: 100% and padding-top: 40%, per a lot of articles that suggested the way to create this type of aspect ratio for a div is to use padding-top in this manner.

In my example, the content within the line-score-card div (the rows and their respective content) are being displayed below the padding, which I guess makes sense, but the result is obviously not what I want. Any help with this would be greatly appreciated!

make the content position:absolute. ONLY the padding need to be inside the div to have the ratio — Temani Afif, Jul 24 '19 at 20:28
ive tried using relative / absolute positioning for the outer / inner contents with no luck — Canovice, Jul 24 '19 at 20:30
ahh i didnt wrap the inner contents in their own div when using position absolute, per the answer below — Canovice, Jul 24 '19 at 20:35

score 1 · Accepted Answer · answered Jul 24 '19 at 20:33

Add position:relative to ".line-score-card" create a new div wrapper (I called it "inner-content" but you can call it whatever) to wrap the inner card rows and then apply position:absolute to the newly created wrapper. This will allow the parent container to maintain the proportion with padding and the content to be positioned appropriately inside. Just be careful of overflow.

.line-score-card {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.325), 0 1px 5px 0 rgba(0, 0, 0, 0.325), 0 3px 1px -2px rgba(0, 0, 0, 0.325);
  width: 100%;
  padding-top: 40%;
  padding-left: 5px;
  padding-right: 5px;
  position: relative; 
}

/* add this to reflect the new inner div */
.line-score-card .inner-content {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
}

.line-score-card .card-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #CCCCCC;
  padding: 4px 0px;
}

.line-score-card .card-row .card-value {
  flex: 1;
  text-align: center;
}

.line-score-card .card-row .card-value.score-total {
  font-weight: 700;
}

<div style="width: 300px">
  <div class="line-score-card">
    <!-- Begin inner wrapper for absolute positioning -->
    <div class="inner-content">
      <div class="card-row" style="border-top: none;">
        <div class="card-value"></div>
        <div class="card-value">Half 1</div>
        <div class="card-value">Half 2</div>
        <div class="card-value score-total">Total</div>
      </div>
      <div class="card-row">
        <div class="card-value">
          <a href="/stats/teams/UNC/overview"><img src="https://s3.amazonaws.com/cbbteamlogos/UNC-logo.png" style="width: 33px;"></a>
        </div>
        <div class="card-value">44</div>
        <div class="card-value">29</div>
        <div class="card-value score-total">73</div>
      </div>
      <div class="card-row" style="border-bottom: none;">
        <div class="card-value">
          <a href="/stats/teams/DUKE/overview"><img src="https://s3.amazonaws.com/cbbteamlogos/DUKE-logo.png" style="width: 33px;"></a>
        </div>
        <div class="card-value">44</div>
        <div class="card-value">30</div>
        <div class="card-value score-total">74</div>
      </div>
    </div>
    <!-- End inner wrapper for absolute positioning -->
  </div>
</div>

inner-content div with positive relative / position absolute makes sense - thanks! — Canovice, Jul 24 '19 at 20:36

Height / Width aspect ratio not working with width: 100% and padding-top CSS trick

1 Answers1