Web Design Articles

Sample CSS Page Layouts


Here are a range of CSS page layouts, including 2 column and 3 column layouts - free to use and abuse as needed.

"Floatutorial" step by step layout tutorial

Liquid two column layout
Liquid two column layout - final result
Liquid three column layout
Liquid three column layout - final result
"Two columns with color" step by step layout tutorial

Two column layout with full height colours
Two column layout with full height colours - final result
Two column layout with full height colours - variation 1
Two column layout with full height colours - variation 2
Two column layout with full height colours - variation 3
"Selectutorial" step by step layout tutorial

Three column layout with full height colours
Three column layout with full height colours - final result
"Liquid Layouts" step by step layout tutorial

Three column liquid layout
Three column liquid layout - final result
Three column liquid layout - variation 1
Three column liquid layout - variation 2
Three column liquid layout - variation 3
Liquid insanity
"Colored boxes" step by step layout tutorial

Two column, fixed width layout
Two column, fixed width layout - final result
Single column CSS layouts

Centre aligned, scalable width
Centre aligned, set width
Left aligned, scalable width
Left aligned, set width





 

 

 

 

why-css-is-good-for-google
using-relatve-font-sizes
random-content-rotation
web-design-xhtml-1-1
web-design-resources
accessibility-intro
web-design-xhtml-2-1
why-internet-marketing
xhtml-latin-1-character-references
google-updates
google-dance
css-positioning-properties
fancy-paragraphs
bob-regan-macromedia-accessibility
web-design-technologies
wrox-beginning-php-4-chapter-3-1
julie-howell-rnib-accessibility
handy-hints-web-design
mod_accessibility
pagerank-1
search-engine-crawling
Definition lists - misused or misunderstood.html
Accessible Data Tables
Developing sites for users with Cognitive disabilities and learning difficulties
An Accessibility Frontier Cognitive disabilities and learning difficulties
Inline elements and padding
Basic webstandards Workshop
Internet Explorer and column collapse
Building a page template in CSS - a step by step tutorial
Remote control CSS
Colored boxes - one method of building full CSS layouts
Replicating a Tree table
Creating a graph using percentage background images
Simple, accessible external links
Simple, accessible more links
Styling abbreviations and acronyms
 Web standards checklist
Floated items inside containers
Liquid layouts the easy way
Two columns with color
CSS Centering - fun for all!
Body padding and margin
List inheritance and Descendant Selectors
Taming the Taming lists model
Headings as images - The Lindsay method
Ideal line length for content
Validating Australian Museum Online
Styling the hr element
Styling and font family names that contain whitespace
Sample CSS Page Layouts
how_to_find_good_freelancer
using_colors_on_website
annoying-website-design
 
cross_browser_compatibility
banner-design-success-techniques
 
craig-tanner-freelance
ecommerce-website-design
 
ppc
separating-content-from-presentation
 
alternative
web_page_optimization
 
personalization
communicating_needs_web_designer
 
buzz
design_it_yourself_or_hire_pro
 
social_bookmarking2
w3c_validation.php
social_bookmarking
web_design_guidelines
 
digg
photo_optimization
 
buzz2
website_templates
 
viral_video
web_design_versus_web_development
 
controversy
graphic_formats
 
 
good_website_navigation_is_important