How to get 100% width and have padding!

programming web dev
1

This is a response to the question on a YouTube comment on how to make a parent element have both a 100% width and have the padding value be respected. Outside of wrapping the parent element inside another div, the easiest solution would be to set the width of the parent element to auto:

  div {
    width: auto;
    padding-right: 300px;
    background-color: #EEE;
  }

This ensures that the parent div takes up all the space while performing the appropriate calculations to deal with the padding value as well :smile:

2

There’s also https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

1 Like