Sean Walther's Blog

CSS3 Layout Structure

Looking over a few articles, I ended up on CSS Advanced Layout Module, a Working Draft for CSS3 on w3.org.

We’ve covered some changes to HTML/CSS parsing in IE8 that will make some standard web layouts much simpler to represent in CSS, CSS in IE8 will support “tables”, fixes problems in CSS.

The new document addresses, in a different method, the problem of laying out tables as most websites are built.

Again, standard CSS makes it difficult to allow text to push the template in the proper directions.  Pushing itself is fine, however the way the rest of the template adjusts to the content — normally doesn’t react as a end user would expect.

The new document details a way to dictate display in a template.

The first interesting point is the document proposes a way to define the rows in a display.  The example provided defines a container, DL, which has a display of “ab” “cd” (in that order).  This means that cell A is top left, B is top right, C is bottom left, and D is bottom right.  This makes life so much easier.  To follow, the elements inside DL are defined as, for example, “#sym1 { position: a}” and “#lab1 { position: b}”.  Suddenly tables are much easier to work with.

Secondly, this opens up functionality the draft has addressed.  The ability to change the display to move the document from 3 columns, to 1 column / 3 rows.  By defining “@media all and {max-width: 500px}” the draft identifies the ability to change the “ab” “cd” to “a” “b” “c” “d”.  Adjusting for a mobile browser, or other alternative browsers (maybe iframes friendly?).

Additional concepts addressed in the draft:

1. Overlapping divs with the earlier display methodology
2. Table like declarations of width, wrapping, etc

Tags: css3, display, div, HTML, layout, overlapping, Table, w3, w3c

No comments yet.

Leave a comment

Name (required) Mail (will not be published) (required) Website

CAPTCHA Code *

Notify me of follow-up comments by email.

Notify me of new posts by email.