Question

I have an element with a 70% width, and it is floating beside another element with 30% width. However, when I add 25px of padding, the element expands and breaks the format.

Is there any way to make padding increase the contents’ distance from the element’s edge, as opposed to making the element bigger?

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  float: left;
  width: 30%;
  background-color: lightgreen;
}

.padded {
  padding: 25px; /* Forces box onto next line */
}

<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

<br><br>

<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>

Answer 1

When you use the border-box model, the padding is included in the box size. See here for details.

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  box-sizing: border-box;
  padding: 25px;
  float: left;
  width: 30%;
  background-color: lightgreen;
}

<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>