# How to get 100% width and have padding!

**URL:** https://forum.kirupa.com/t/how-to-get-100-width-and-have-padding/633941
**Category:** web dev
**Created:** [November 11, 2015, 7:35pm UTC](https://forum.kirupa.com/t/how-to-get-100-width-and-have-padding/633941 "2015-11-11T19:35:50Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 11, 2015, 7:35pm UTC](https://forum.kirupa.com/t/how-to-get-100-width-and-have-padding/633941/1 "2015-11-11T19:35:50Z")

</div>

This is a response to the [question on a YouTube comment](https://www.youtube.com/watch?v=j9DcYeG_ENM&lc=z12nvlnxvymaypznz23qhplz0vqoe5t5u04) 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 😄

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 17, 2015, 5:58pm UTC](https://forum.kirupa.com/t/how-to-get-100-width-and-have-padding/633941/2 "2015-11-17T17:58:37Z")

</div>

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