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.