W3C home > Mailing lists > Public > www-style@w3.org > April 2009

Re: css alignment?

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 6 Apr 2009 15:59:11 -0500
Message-ID: <dd0fbad0904061359q54d4e176v5f16ede7810247c4@mail.gmail.com>
To: inhahe <inhahe@gmail.com>
Cc: www-style@w3.org
Allow me to summarize Brad's responses in a simpler/shorter manner:

1. CSS doesn't care about using tables for layout.  For all it's
concerned, you can go crazy with <table>s in your markup.  CSS is just
a way to specify display.
    Now, CSS *gurus* will be down on that, because they know that
*HTML* discourages using tables for layout.  Tables have a specific
set of semantics (they indicate that the data in the cells is related
to data in cells in the same row/column).  Using tables for layout
completely violates that, and makes it much harder to
machine-interpret the page.  (It also makes it much more difficult to
change the display of the page, since so much of the layout
information is stored in the structure of the HTML itself.)
    A CSS guru also typically knows their way around CSS layout, and
so can find ways to create their layout without resorting to abusing
HTML semantics.  (Similarly, a CSS guru will hurt you for using <font>
and <b> to create a heading, as it's an abuse of HTML semantics for
display purposes.  Instead, just use the appropriate <hn> tag and
style it to look as you want.)

2. CSS is still rather immature for layout purposes.  There's a lot of
things you can't do easily, and some things you can't do at all,
especially if you're trying to keep your HTML pure and logical.
However, things are changing.  You have several tools at your disposal
now that will help, and many more that are coming in the future.
    The CSS table module is one of the things you can use now.  It
allows you to style your page with a constraint grid, similar to how
<table> elements are currently displayed.  It even uses familiar names
like table, table-row, and table-cell, to make it clear how things
work.  Brad pointed out how to use this in your example, by making the
container display:table and the two columns display:table-cell.  All
of the modern browsers support the table-* display values (IE7
doesn't, but IE8 does, and you can often fake it in IE7 and IE6 with a
conditional comment making the columns float instead).
    In the pipeline are various modules which deal with layout
specifically.  The Template Layout module is one of them, which just
got a new draft.  Grid Layout is another, along with Table Layout
Level 4 and a few other proposals (Matrix Layout, etc.).  The Working
Group is planning on spending some time in an upcoming face-to-face
hashing out the various proposals currently existing and figuring out
just what we want to push as official modules.

3. You probably want to learn a bit more about how CSS works, since
your blog seems to indicate that you don't have a good grasp on the
differences between block and inline elements (and why these
differences are significant), and that you don't quite understand the
divide between HTML semantics and CSS display (and again, why this is
significant, such as why navbars are usually coded with <ul>s).

~TJ
Received on Monday, 6 April 2009 20:59:51 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:46:58 GMT