RWD: struggle with flexible padding context

[Ramone]

Hi, everyone!

I’m trying to get to grips with RWD and decided to start with the origins: Ethan Marcotte’s book “Responsive Web Design”.

However, I’ve stumbled upon rather simple issue: the book says, that when applying target / context = result formula to horizontal paddings, one must take a padding’s posessor (the element itself, rather than the element’s parent) as a context. It seems I’m not getting the concept right, because browsers behave differently: the padding’s value is calculated relatively to the element’s parent (as would be with margins, for example). Here’s the codepen.

So, wise css-folks out there, what do you say? My question is: why the book and reality diverge and what is the right approach to RWD here?

I would really appreciate any help, because after not having found an answer on numerous forums (SO, CSS-tricks included) I’m starting to feel cognitive-dissonancy a bit…

[Atelierbram]

I know this is not answering your question in all it’s complexity, but when you make it easier on yourself by setting box-sizing: border-box on those, or even all elements, then the problem will dissolve, that is if I understand the intention of your question correctly.

http://codepen.io/atelierbram/pen/xaHhu

[Ramone]

+1 for box-sizing: border-box, but this is not the issue here.
The uncertainty with padding context persists.
Following the book, left margin is calculated relatively to the blue box’s parent – red div, whereas left padding of the blue box is calculated relatively to the box’s width.
As seen, margin seems to be calculated correctly – it accomodates 10% of the red div’s width. As for padding, it must accomodate 10% of the blue box’s width, but it doesn’t. Rather, it looks like it equals left margin.
This is the behaviour I don’t get.

[Atelierbram]

@Ramone If you tell me on which page of the book, then I will look it up in mine, will try to find it anyway though, but will be helpful. OK found it: page 35.

[Ramone]

Yes, of course=)
The paragraph is on page 35 (chapter 2 The Flexible Grid).

[__]

when applying target / context = result formula to horizontal paddings, one must take a padding’s posessor (the element itself, rather than the element’s parent) as a context.

I don’t follow what you are trying to calculate (target/context), but percentages are always relative to the parent element. It doesn’t matter what specific property you are applying the value to.

[Ramone]

@traq Yeah, I see that percentages are relative to the parent..
But in this case, it is unclear to me, what Ethan Marcotte was trying to say by that:

When setting flexible padding on an element, your context is the width of the element itself. Which makes sense, if you think about the box model: we’re describing the padding in relation to the width of the box itself.

[Atelierbram]

You might be on to something here, but I wouldn’t get hung up on it. He’s basically explaining in this abstracted way the converting of set pixels to percentages on elements. It’s about this converting calculation thing, is his example he is converting the 48px padding on this h1.lede-element into percentages on the Robot-or-Not demo site . Here he gets away with it, because the width of the h1.lede element is the same as the width of the parent, since as he writes ‘the headline doesn’t has a declared width’ – (and also no margin set): so defaults to 100% on block-elements.

Tweeted this out:
Wouldn’t it be great if @beep could comment on this forum question https://css-tricks.com/forums/topic/rwd-struggle-with-flexible-padding-context/ … on the 4 year anniversary of his 1st @RWD article?

Got an answer from him back right away: incredible:

Saying “That is, the context for padding + margin is the same as width: the width of the element’s container. (http://www.w3.org/TR/css3-box/#padding1 …)”

and: “I don’t have an account, but that’s an error in the book. (One that’s soon going to be corrected.)”

So @Ramone kudos for finding this error, confirmed by the writer himself!

[Ramone]

A-ha! Thank you, @Atelierbram, it is much clearer for me now.
And as @traq has said, when expressing margins or paddings in percentages one should do it relatively to the element’s parent width.

P.S. BTW, as for percentage padding values the CSS spec says the same: it “refers to width of containing block”.

[__]

He’s basically explaining in this abstracted way the converting of set pixels to percentages on elements.

Ahh. Well, the better solution is to just not do that.

<div id=parent>
    <p id=child>Hello!></p>
</div>

If #parent is 200px wide, and you want #child to be half the width of #parent, then it doesn’t matter how wide the parent is: set the child’s width to 50%.

Similarly, if #parent is 200px wide, and you want #child to be 100px wide, it doesn’t matter that 100/200 = .5 = 50%: set the child’s width to 100px.

Percentages are good for RWD if you design with them. Designing in pixels and then converting them all to percentages has no benefit. It just makes your code more complicated and fragile. If you want pixels, use pixels.

So @Ramone kudos for finding this error, confirmed by the writer himself!

Well, there ya go. Glad you got an answer!

[Atelierbram]

@traq don’t disagree with this at all, find when you get used to ‘designing in the browser’, and make a habit of setting horizontal margins and paddings in percentages (, or em’s with box-sizing: border-box) it feels more natural. Remember though, when Ethan Marcotte started writing about RWD four years ago, it was almost an evangelical mission. Photoshop mockups were the norm for web-design, (for desktop web-browsing was the main thing and smart-phones not in everyone’s hands all the time). Maybe he and/or the publisher’s of the book felt the need of making this journey from pixels to percentages conversion in the book, in order to convince the sceptical reader. But even so, I can still remember having this aha-moment when reading the book, … to be precise on page 124 “Mobile first meets media queries”, kind of adapted this approach since then: it just makes so much sense in every way.

[Ramone]

Wow!!! I’m so-o-o impressed=) Didn’t expect that the scenario would involve the author himself…

Thank you all, guys, for help and take care!

P.S. One more thing.. This is kinda my first post here and I don’t know, whether I should close it. And if yes, would you be so kind to tell me, how it is done?))

[Author]

Posts