wsj lab:: CSS - width settings part 1
In the old time, I used to put a value such as 99% or 98% for the width in CSS in order to get the layout look like the one you are reading right now. I don’t remember the actual reason why I did that, but it somehow looks dumb when I just need a simple frame around my content block. Why it looks dumb? Because I always need the time to try and see whether 99% or 98% is better to fit the window width so the horizontal scrollbar won’t show up.Therefore, I decide to dig in a little bit and see what it is actually going on with this width thing…
» 翻中文
-
When you have !DOCTYPE element in your XHTML document,
the standards-compliance in IE will be turned on,
i.e. The layout you define in CSS will look closer (... I am not saying "the same" here) to what it shown on Firefox. -
Since the standard-compliance is turned on, the values, especially the percentage ones,
you set for the width of container object such as div will be calculated differently. -
sample1a.html:
This sample shows you how the 100% of width is calculated with !DOCTYPE element is presented -
sample1b.html:
This one shows you how the same settings looks differently on IE with !DOCType element is NOT presented.
And you won't be find anything difference between this two samples on Firefox. -
In conclusion, I will probably skip the width definition and work on the body’s padding property instead
when the only thing I want is a frame around my content block.