Skip to content

Instantly share code, notes, and snippets.

@notahat
Created October 9, 2008 06:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save notahat/15708 to your computer and use it in GitHub Desktop.
Save notahat/15708 to your computer and use it in GitHub Desktop.
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