Sample CSS Page Layouts

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