Created
October 9, 2008 06:10
-
-
Save notahat/15708 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Why is http://gist.github.com/15704 invalid HTML? | |
The width of each column is specified as 50%. Section 10.2 of the CSS2 spec tells us: | |
The percentage is calculated with respect to the width of the generated box's containing block. | |
The containing block in this case is the table. So let's say the table is, for example, 500px wide. | |
That means each column is 250px wide, but... | |
Section 17.6.2 tells us that the row width is: | |
row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + | |
border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn) | |
So, because we have padding and borders on our table cells, our row width is: | |
0.5 + 5 + 250 + 5 + 1 + 5 + 250 + 5 + 0.5 = 523px | |
Section 10.3.3 tells us the width of a block's contents *must* add up to the width of the block. | |
Bzzt. We lose. | |
(Section 10.3.3 also specifies what the browser should do if the width's don't add up. Real browser | |
behaviour seems to be different to this, at least for tables.) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment