- This topic is empty.
May 25, 2014 at 10:10 am #171043
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 = resultformula 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…May 25, 2014 at 10:59 am #171046
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-boxon those, or even all elements, then the problem will dissolve, that is if I understand the intention of your question correctly.May 25, 2014 at 11:26 am #171050
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.May 25, 2014 at 11:33 am #171051
@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.May 25, 2014 at 11:43 am #171053
Yes, of course=)
The paragraph is on page 35 (chapter 2 The Flexible Grid).May 25, 2014 at 12:04 pm #171056__Participant
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.May 25, 2014 at 12:16 pm #171057
@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.May 25, 2014 at 12:25 pm #171058
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
48pxpadding 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.ledeelement 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!May 25, 2014 at 2:37 pm #171062
P.S. BTW, as for percentage padding values the CSS spec says the same: it “refers to width of containing block”.May 25, 2014 at 3:23 pm #171066__Participant
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>
#parentis 200px wide, and you want
#childto be half the width of
#parent, then it doesn’t matter how wide the parent is: set the child’s width to
#parentis 200px wide, and you want
#childto be 100px wide, it doesn’t matter that 100/200 = .5 = 50%: set the child’s width to
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!May 25, 2014 at 4:08 pm #171067
@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.May 26, 2014 at 10:16 am #171093
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?))
- The forum ‘CSS’ is closed to new topics and replies.