# Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Using width % with em padding

• This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
• Author
Posts
• #192075
modiophile
Participant

How do I calculate an em padding value when used in conjunction with an arbitrary width which has padding of its own and for which I do not want to overlap?

For example, http://codepen.io/modiophile/pen/XJNpER I want the second box “em content” to not overlap with its parent container “em container” but then how do I calculate that?

As you can see from the first example in my pen, its easy enough to do this using percentages, but ems however not so much…

#192081
Tom
Participant

I’m not that great with em’s myself but I can give you the basic math for the example in your pen. Here goes, `max-width: 1000px = 62.5em` because `1000px/16px = 62.5` so since you sized the container div to `75%` you do `62.5em*0.75 = 46,875em` and since you used `padding: 1em` you do `46,875em - 2em = 44.875em` so `width: 44.875em;` is the answer. Pay attention however the padding isn’t the same for both divs. A base 1em is 16px and 1.6% of the div is 12px since `750px*0.016 = 12px`. I hope this helps!

Viewing 2 posts - 1 through 2 (of 2 total)
• The forum ‘Other’ is closed to new topics and replies.