TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

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:
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="sub-section">sub-section</div>
<div id="footer">footer</div>

With some background colors, they look like this:

content

sub-section

The Layouts:

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:

All pages should validate as XHTML Strict, but don't expect the stylesheet to pass the Validator. If the "badge" is important for you, then use a Conditional Comment to hide IE fixes.

Before you ask, I'll tell you what these 2 declarations - present in every sheet - are used for:

overflow:hidden
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.
display:inline-block
This is to prevent a MSIE painting bug. It is to make sure background colors are not painted outside of elements.

The Gallery:

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.

Take note 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
Layout 1
Browsercam: Layout #2
Layout 2
Browsercam: Layout #3
Layout 3
Browsercam: Layout #4
Layout 4
Browsercam: Layout #5
Layout 5
Browsercam: Layout #6
Layout 6
Browsercam: Layout #7
Layout 7
Browsercam: Layout #8
Layout 8

Try this at home with tables ;-)

Reading that will help you customize these layouts:

Take note Do not miss this new article from Alex Robinson on PositionIsEverything.net