Web Layout using CSS

Column Menu

3 columns, the holy grail
2 columns, ALA style
4 columns, all fluid
3 columns, all fluid
static width and centered
nested float

From glish.com

WEB LAYOUT

using Cascading Style Sheets

This layout was created completely with Cascading Style Sheets (CSS) without the use of tables. The design features floated menu tabs, floated columns and nested floated sidebars. Furthermore, the design is completely scalable, adjusting to the user's monitor resolution and browser font size by using percentages and ems for sizing design elements and font-size keywords rather than pixels. CSS layout ideas gleaned from glish.com (column layouts), Simple Box by tedd (rounded corners), and A List Apart (elastic design using ems).

GREAT HEADLINE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

So what is this page for?

Jennifer Davis, Web Designer

W3C (World Wide Web Consortium) says web authors should not use tables for web design layout. Tables are for data, not for layout.

I've done a lot of designs with tables! But I have been slowly converting all my older designs to meet W3C standards.

Nevertheless, I decided to create this mock design in order to continue working on web layouts using CSS, and in particular, to experiment creating a completely fluid design.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ANOTHER GREAT HEADLINE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.