?

Log in

No account? Create an account
Eyes

Entreaty for LiveJournal S2 Developers

When using a table to introduce horizontal divisions within an area with a visible boundary...

please do specify the width of 100% for the table.

If you forget doing so, horizontal centering—either via <center> tags or via CSS auto-margining—will not work correctly relative to the visible contents area.  Here's why:

Let's say we have introduced a fixed-width contents area like this.  Now let's say we want to subdivide this area into two vertical bars, the left being 120-pixel wide (with 10-pixel padding) and containing the entry author's name and userpic, and the right taking the rest of this area and containing everything else, like the entry timestamp, title and contents.  Naturally, we would want a 1-by-2 table:

astralblue

The HTML code used to introduce this table is:

<table style="margin: 0; border: none; padding: 0; border-spacing: 0" cellspacing="0">
<tr>
<td style="border: none; background: olive; padding: 10px; width: 100px; color: white; vertical-align: top; text-align: center">
(insert username/userpic code here)
</td>
<td style="border: none; padding: 10px; vertical-align: top">
(insert entry contents here)
</td>
</tr>
</table>

Note how the width: 100% CSS property is missing from the <table> tag highlighted above.  Without the width property, when the entry tries to center a one-liner, like <p style="text-align: center">Merong!</p>, it won't work:

astralblue

Merong!

This is because the default width of a table is not the same as the width of the containing block (the visible white area in this case), but automatic: The browser tries to calculate the optimal width, which is often the minimum possible width of the table that doesn't overflow its contents (word wrapping is okay).  Since the right table cell contains only a short line, the browser sets the width of the cell to the width of the line itself and derives the table width accordingly.  Below is the same table, but with the right cell filled with a different background and the table outlined in red:

astralblue

Merong!

See how the right cell has been shrunk to fit?  This is why centering didn't work.

Now, same table, but this time width: 100% specified for it:

astralblue

Merong!

Without the alternative background/border:

astralblue

Merong!


References:

Bert Bos et al, CSS 2.1 Specification, http://www.w3.org/TR/CSS21/, June 2005.

Comments

MERONG!
Is it really necessary to reference and everything? :P

'cause stupid people need their definitive source of information, instead of Joe Copy-And-Paste-Broken-Code-Snippets websites.

I don't know if you have anyone in LJ-land on your friends list, but if you don't, then complaining about the behaviour here is rather meaningless.

If you'd like me to put you in touch with someone who is in support, I can do that, and she can pass along your input.

Actually I was about to post a link to this entry onto relevant communities.

But yes please, if you can pass this along for me, do so by all means. :)

This is totally off topic, but I had a dream that I was meeting you and 001 in the middle of some town square for a dance-off, but then we ended up seeing a movie, except I picked the wrong theatre and ended up watching Stealth.

But wow yeah, that's some nice HTML. Thanks for sharing the goods.