HTML and CSS Reference
In-Depth Information
An HTML5 contribution to tables for layout
The W3C HTML working group has acknowledged the incredible persistence of
the layout table and, thanks to HTML5 and ARIA, has recommended a method
for indicating that a particular table is semantically meaningless (that it's just for
layout):
<table role="presentation">
This doesn't mean you should ignore all the best practice advice and convert
your CSS layouts to tables, but it does mean you can easily make old pages more
accessible without a major rewrite. See
www.w3.org/html/wg/tracker/issues/
130 for further details.
Underused CSS2 layout features
CSS2
had several new features for layout—
inline-block
and
table
,
table-row
, and
table-cell
values for the
display
property—but they've
seen little use in real websites because of the lack of support for them in
the most popular browser of all time (in terms of market share),
IE6
. In
this section, we'll review these underused features of
CSS2
.
Placing elements on a line with inline-block
inline-block
is a compromise between
<block>
elements and
<inline>
elements. A
<block>
element can have a defined width, height, padding,
and margin and causes a break in the text. An
<inline>
element sits on
the line of text but can't have a width, height, padding, or margin. An
inline-block
element combines features of both—it sits on the line of
text, but it can be given a specific width, height, padding, and margin.
This simple markup will be used to dem-
onstrate layout with
inline block
. If you
check the code download for this chapter,
you'll find an example layout done with
floats, a method familiar to anyone
who's done any
CSS
layouts in the last
ten years. Achieving a similar layout
with
inline-block
requires that you set
the widths of the
<section>
and
<aside>
elements appropriately:
<header>
<h1>Heading</h1>
</header>
<section>
<p>I never am...</p>
</section>
<aside>Side bar</aside>
<footer>Footer</footer>
