I have the following markup:
-
You can generate this kind of flexible columns layout using the Yahoo YUI CSS Grid builder.
The output is not something that I would want to hand-code, it has divs nested 5 deep, and references the YUI CCS library which is 6kb when minified. I'm not happy that this is not easy to handcode, despite being easy to describe.
Here's the generated html. This may not mean much without the CSS.
YUI Base Page
header content
Main content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Left bar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
footer content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
It seems to work fine in current Chrome and Firefox, and in Internet Explorer 9.
Note that the right column comes before the left one in the mark-up - float: right is used on . The use of :after css rules is interesting, and may be important.
- 热议问题