The Ultimate XHTML Strict Markup

The Content Area A

About this style

The purpose

The intention of this site is to provide a number of different CSS layouts that are all derived from the identical XHMTL Strict base.

The jeff-semantic theme will implement this HTML file once it's been finalized so applying any of these CSS layouts will provide the immediate result you're looking for.

To demonstrate how each CSS layout will work, the header is red, the footer is orange and the main content area (where the module and client HTML is put) in dark grey. The additional content areas would be theme/client dependent.

This is for LAYOUT ONLY In your final design each of the areas will contain additional stylistic markup, navigation bars, background images and a variety of other things. The intention of this is to simply demonstrate how to position the different parts of the general layout and what the results are.

The CSS Layouts

• 1 Column Centered Fixed Width
• 1 Column Full Height
• 1 Column Centered Fixed Width With Navigation on the Left
• 1 Column Centered Fixed Width With Navigation on the Right
• 1 Column Centered Scalable
• 1 Column Centered Fixed Width With Navigation Under Header
• 1 Column Left Aligned Scalable
• 1 Column Right Aligned Scalable
• 2 Columns ALA Style
• 2 Column Fixed Left
• 3 Column All Fluid Absolute
• 3 Columns All Fluid
• 3 Column Fixed Sides Centered Full Height
• 3 Column Fixed Sides Centered
• 3 Column Fixed Sides (Holy Grail)
• 3 Column Static Width Centered
• 4 Column All Fluid
• No Layout
• Scrolling Content
• Vertical (working on it)

The Content Area B or Navigation

Integer ultrices neque eget ipsum. Aliquam faucibus convallis odio. Suspendisse potenti. Maecenas sem. Vestibulum fermentum tristique purus. Morbi nec elit in orci dictum faucibus. Aenean volutpat elit ac urna. Phasellus porta, pede ut cursus egestas, nulla felis adipiscing mi, non venenatis leo velit sed metus. Cras at enim vel est hendrerit dictum. Ut dapibus odio ac nibh. Sed iaculis dignissim urna. Quisque et libero ac augue facilisis placerat. Aliquam nonummy, mi eget consequat aliquam, justo dolor aliquam metus, eget scelerisque elit lectus sed enim. Nullam varius fringilla nisl. Aliquam convallis libero nec dolor. Donec hendrerit lorem nec risus. Nulla facilisi. Vestibulum quis ligula.

The Content Area C or Navigation

Nullam vestibulum, est non posuere ultrices, dui leo porttitor mauris, non sodales lorem nulla id justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce volutpat ullamcorper est. Maecenas quis sapien non velit accumsan bibendum. Integer iaculis risus id risus. Praesent aliquam laoreet felis. Donec non tortor nec nibh ultricies pretium. Cras venenatis. Suspendisse adipiscing sapien ut est. Proin quam. Praesent feugiat laoreet arcu. Mauris vel ligula. Phasellus elit ante, luctus in, bibendum non, luctus ac, est. Vestibulum ac neque sed leo gravida vehicula. Mauris tempor.

The Content Area D or Navigation

Curabitur nulla orci, laoreet at, pretium nec, eleifend vitae, mauris. Ut eget dui. Ut id odio eu nisl luctus tristique. Integer nibh lectus, blandit et, elementum ut, imperdiet quis, turpis. Nunc pellentesque tellus eu dui. Praesent purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Ut quis diam. Maecenas risus urna, sollicitudin nec, condimentum eu, congue ac, nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut vel pede. Maecenas eget elit. Ut tempor tellus a elit. Donec laoreet mi id massa. Quisque semper neque eget mi. Cras sapien nunc, laoreet sit amet, volutpat nec, sollicitudin eget, nunc. Duis augue felis, rhoncus sit amet, accumsan ac, placerat id, neque. Nullam consequat, turpis id pretium pulvinar, metus mauris nonummy ligula, at porttitor nulla elit nec dui.