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
<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
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:
<p>I never am...</p>
<aside>Side bar</aside>
Search WWH ::

Custom Search