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

Home Forums CSS RWD margins: target/context equals what?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #158047

    Hello Everyone,

    I found something strange when I was converting margins with a pixel base to percentages. I don’t know if I’m just a little slow on the draw or what but I have not been able to find anything about this on the web.

    I have 3 divs with the class of .content-block and
    I’m using box-sizing border-box in firefox 25.01.

    Each div (except the first no margin) has a combined width including padding of 253px and a left margin of 20px.

    My container div for div.content-block is 79.4439%(800px) wide with no padding or margins.

    .content-block {
        float: left;
        margin: 0 0 40px 20px;
        padding: 0 20px 10px;
        width: 31.6667%;

    When I use the formula target/context = result i get


    I end up with a margin of 58px and I drop floats, that’s way too big but if I treat my div as if it’s 100% and subtract the margin using this formula I get the correct percentage!

    100 – 20 = 80
    20 / 80=.25*10=2.5%

    Am I seriously confusing my target and context or have I just been awake to long?

    Thanks in advance!


    Perhaps you could make a Codepen to demonstrate the problem.

    Usually, it’s not a good idea to mix actual px values and percentages. Try to stay consistent with the measurement choices you are using.


    Thanks Paulie D,

    I do my layout in pixels and then convert to percentages.

    I found the problem there was a 16px margin in the body margin 0 solved it.


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