Hi Everyone,
I’m working my way through a book on CSS, came across this passage, and am finding myself confused. I cannot work out the author’s conversion. Would love (and really appreciate) some help. How does he figure the “element’s containing block must be 27.272727em wide”?
Thanks!
Is there anything mre to go off of? The paragraphs width would be varied depending on the parents width. Also 27em width would vary depending on the font size of the parent. Overall, this doesn’t seem to make much sense. There’s just not enough information to go off of.
To be completely honest, he shouldn’t even be trying to force calculations to add percents and ems together. Dunno…just need more information, but I doubt there is, based on that screenshot.
Take a look at this example.
http://codepen.io/ryanreese09/pen/LVWdmJ
Now replace that width:27em with 67% width. They don’t equate.
Basically, noone probably proof read that author 
.
lol, thanks for getting back! Yeah, I was considering this might have just missed some proofing before it went to print. The book is by a pretty respected figure in CSS too, Eric Meyer. Here’s a larger screen shot. And here’s a link to the book in google books:
I’m not sure if he’s trying to tell you what you should SET the width to, or what it calculates out to…
Im guessing that’s what it must be set to for the purpose of his demo.
hmm, ok! I was definitely left confused. Thanks again!
Ok he’s basically setting up that p{} example and telling you what value the containing block element will equate out to (27.272727em) and any wider than that will result in the auto right margin in being a positive value. Or make the inner p content width wider than 18.272727em and it’ll equate to a positive value and thus create a right margin gap.
I think that’s what the example here is trying to indicate.
So his 27.272727em; example …2/3rds of that (sinceh eh as 67% width) will equate out to 18.181818em (basically). Then you add in the 4em from the right / left padding. That’s 22.181818em. Then 5em from the left margin. That’s 27.181818em. Some browser rounding in place (or bad math by me) and that’s 27.272727em.
Basically, his 27.272727em width parent could easily be any width, and the logic applied elsewhere. For a right margin to appear (as he says), a smaller p{} width is needed, or a larger parent width. Does this make sense?
Either way, this was terribly explained by Meyer…Or rather, not explained at all…
Your explanation helps a bit, but I’m still confused. So was that figure 27.272727 just arbitrary? Seems pretty specific. I’m with you though on 2/3 of that being the 18.272727.
And I’m not sure why he says "In order for the right margin’s width to evaluate to zero, the element’s containing block must… " Why would you want the right margin’s width to evaluate to zero?
He was saying with that current setup, due to the width of the p{} element (width/margin/padding), there was no right margin due to how an auto margin works.
With that specific example, it equates to margin-right:0;.
I imagine it’s just arbitrary but it does seem specific. I still feel like context was missing, but I’m going with what is in front of me .
haha ok, great. I’m just glad to know that it wasn’t 100% me. Thanks again for the very helpful input!
It’s confusing t me too, don’t worry.
I think the whole point that Meyer was trying to make, was that it’s possible to combine different units of measurement, but just make sure you actually take time to do the math .
I believe the math is based on his assumption higher up the page where he says the div width is 30em. In order for the right margin to be zero with all those dimensions in place would mean either the containing block was smaller or the 67% should be larger. Of course the right margin doesn’t need to be zero.
It does seem an overly complex way of saying somethng pretty simple though.
I think the eventual point was that mixing percentage and fixed length units can never produce a full fluid layout. (Of course he didn’t know about the border-box model then so most of that discussion is a moot point really as you can simply switch the border-box model and mix things more or less as you wish.)
Interesting. I must have missed that! Thanks. Where specifically did you see the mention of the containing div width being 30em? Thanks again.
OK, I see way up on page 168 he mentions an assumption of a containing block width of 30em. I still don’t understand how he arrives at 27.272727 though. 
here’s where I’m at: 5em + 0 + 2em + 67% + 2em + 0 + 0 = 30em
Ok if he’s working from a 30em containing width, then let’s go through the math here with the mixed example.
67% width would be roughly 20em for the p{}. Then we add in 4em from padding. That’s 24. Then another 5 from the left margin and that’s 29. That means, if we throw together an example…it should have some space on the right due to the 1em leftover (auto margin will make use of this.)
http://codepen.io/ryanreese09/pen/VLpqLJ
Yup - see.
I’m not sure why he talks about a container width of 30em and then changes it to 27 for his example.
You understand the logic though - I think you can move on.
As you can see in Ryans demo above the right margin is not zero. Therefore for the right margin to be zero the containing block needs to be smaller.
The calculation becomes this:
containing block = ( x * 67%) + 5 + 2 + 2
The value for x that satisfies that equation is 27.272727em.
e.g.
27.272727 * 67% = 18.272727
Therefore:
18.272727 + 5 + 2 + 2 = 27.272727
It’s purely a maths thing 
I’m guessing that’s what Meyer meant. He was trying to tell show what value was needed for a 0 right margin, as well as you then knowing what container widht (OR paragraph width) would be needed for that auto right margin to calculate positive/negative.
Very confusing chapter…
haha, very helpful guys, thanks! And yeah, I’m comfortable moving on now. Phew.
Thanks again!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
