The Tridecadal Korean (astralblue) wrote,
The Tridecadal Korean
astralblue

  • Mood:

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.

Subscribe

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 7 comments