RWD margins: target/context equals what?

[hshoenfelt]

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

7.3260073260073260073260073260073%!

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!

[Paulie_D]

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.

[hshoenfelt]

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.

Thanks

[Author]

Posts