contain original width even after padding

What is it

its a common problem that many new-by web-designers come across with. You have a div of predefined width which you don’t wanna change, and now you want to give the <div> some padding so that the content looks better visually. The moment you give and padding to the <div> its width increases and breaks your design !!.
Lets say you have a container <div> of width 600px and you want to float 3 div’s of equal width in there. So you set each inner <div> a width of 200px. so far so good, its working. But you see all the 3 inner <div> have no space between them and you go to set a margin to separate them a bit. You give the inner div’s a margin of 10px each and to compensate you reduce their width to 180px. Phew !! it was hard but it worked..

Again now you want to give some padding to the div’s. You give them a padding of 10px and your design breaks again !!!


padding increases the width of the container. Normally in the beginning we think (and that’s how it should be i think) that padding wont affect the outer width, instead it will leave space inside the border and the content will get less space to fit in. But actually what happens is that the space inside remains same and total width increase to accommodate for padding space. So a <div> with width 100px on giving a padding of 10px actually becomes 100+(10*2) = 120px wide.

The solution

Its rather easier than you think it would be. Add another <div> inside your content <div> and give the inner <div> a padding of 10px, then wrap all your content inside the inner <div>
so originally if i had my markup as

<div class="container">lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>

the css →→ .container{width:100px}
I’ll change it to something like

<div class="container">
<div class="inPadd">lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>

extra css →→ .inPadd{padding:10px}

That does the trick for you. So wherever you want some padding you just wrap around the content in a <div> with class ‘inPadd’ and it wont affect the width of your outer container.

Hope it helps…