One clean HTML markup, many layouts...
xhtml.ru has a copy of this article in Russian
It is this thread (title: "one template to rule them all") on the CSS-Discuss List that initiated this article.
The original post included a link to a document that contained a set of images representing different layouts, the question was:
"Is it possible to have one HTML file, and style these pages this way only with CSS?".
So here we go...
The (X)HTML markup:
Let's start with the strict minimum:
With some background colors, they look like this:
Half of the thumbnails below match the layouts published on geocities, I just came up with a few others.
While browsing these pages, keep in mind that these documents do not contain any:
- element for clearing.
- Conditional Comment.
- CSS filter.
- position declaration.
Before you ask, I'll tell you what these 2 declarations - present in every sheet - are used for:
- This is to prevent issues with MSIE, as well as with modern browsers in case an element in a container is/gets "too large" or that container shrinks too much. With modern browsers, the element would stick outside of the container, with MSIE, it could force a "drop" of the container.
- This is to prevent a MSIE painting bug. It is to make sure background colors are not painted outside of elements.
Please note that this is not an exercise à la Zen Garden, the aesthetic aspect is irrelevant here, the goal was to achieve many fluid layouts with the bare minimum:
- 5 content DIVs.
- a short stylesheet.
- no hacks.
Originally, I didn't use any background images with these layouts. My intent was to show gaps between some containers, to demonstrate how DIVisons behave compared to table cells. But these gaps made some people, less familiar with CSS, think that these layouts were flawed. So, to get rid of the whitespace, I decided to include a few background declarations. Because these rules are not related to layout, but to "design", they are not listed with the others (see the source code to find out about background declarations).
I would suggest disabling images in your favorite browser to witness the relationship between containers, and to better understand floats behavior.
Clicking on any of these images will open a page showing the corresponding layout (it is possible to navigate from one layout to another within the documents). Clicking on the Browsercam link above the thumbnails will show screen captures of the selected layout in a variety of browser versions and platforms (opens in the same browser window).
- Browsercam: Layout #1
- Browsercam: Layout #2
- Browsercam: Layout #3
- Browsercam: Layout #4
- Browsercam: Layout #5
- Browsercam: Layout #6
- Browsercam: Layout #7
- Browsercam: Layout #8
Try this at home with tables ;-)
Reading that will help you customize these layouts:
Do not miss this new article from Alex Robinson on PositionIsEverything.net