Mon, 2013-07-08 03:44
Hi there,
I use the css reset and make the div i want. However I dun understand the calculation here:
css:
body { min-width: 1000px; text-align: center; } .wrapper { width: 960px; margin: 0 auto; padding: 10px; text-align: left; background: pink; } header { width: 940px; padding: 10px; background: red; }
html:
<div class="wrapper"><!-- not needed? up to you: <a href="http://camendesign.com/code/developpeurs_sans_frontieres" rel="nofollow">http://camendesign.com/code/developpeurs_sans_frontieres</a> --> <header> <h1><a href="/">Page Title</a></h1> <p>Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec se mp er quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhonc us suscipit, sem dia m ultr ices mau ris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapi en. Phas ell us quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere.</p> </header> </div>
my doubts are:
1 - how come the total wrapper width is not 980? cos width + padding = 980px (pink color bg)
2 - how come the total header width is not 960? cos width + padding = 960px (red color bg)
please advice.
Mon, 2013-07-08 15:32
#1
Why use the reset?
This is causing your confusion:
* { -moz-box-sizing: border-box; }
There is no rationale for a global reset. None! Your best bet is to simply remove that silliness and undo any adjustments you've made because of it. Also, get rid of reset.css and its stupidity. See Global resets considered harmful.
The comment on box-sizing, "Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/", indicates the author grew up with standards non-compliant IE, and has failed to be at home with W3C recommendations. It also is symptomatic of a print oriented graphic designer, people with little understanding of the dynamic nature of even the simplest of web pages.
cheers,
gary
Tue, 2013-07-09 06:52
#2
Hi Gary!!! Thank you so so
Hi Gary!!!
Thank you so so much for your info! It really helps me a lot about the "reset" things.
All my confusions are fixed now 
Much appreciate it! <3
Tue, 2013-07-09 15:41
#3
@Gary Sadly this is a chap
@Gary Sadly this is a chap I've seen quoted often now, those that look for quick easy answers and hate to have to learn, latch on to anyone who says "hey it's all easy just do this" set ALL elements to border box, how's that frigging work? and yes it's all about the flaming print paradigm as it's often paired up with Grids as being a reason to use it.
Tue, 2013-07-09 20:17
#4
Thanks, Hugo
Yeah, grids are the likely ab ovo for that silliness. Grids are so distant from best practice as to be off my radar.
It occurs to me that MSFT might have lifted IE's original (border) box model from Word, which is a print application. I mean, remember hasLayout? (as if anyone who's been around a while could forget) It was also taken from desktop applications rather than being properly coded to render new block formatting contexts per the standards.
@nanacss: There are a lot of poor practices being flogged on the 'net, and anyone new to html and css will lack the historical perspective necessary to separate the good from the bad. I am happy that I could extend your understanding of the issues, if only a little.
cheers,
gary
Wed, 2013-07-10 03:52
#5
Hi Gary & Hugo, Thank you
Hi Gary & Hugo,
Thank you very much 
It really helps.