Sherina :: 10+ CSS Layout Demos :: July

This article is a collection of CSS layout designs that offers flexibility and are easy to implement. Without further ado, here they are:

3Col Fixed SEO

#page_margins {width: 980px; min-width: 980px; max-width:none } #main { float:left; width: 100%; background-color: transparent; background-image: url(../../images/bg_pattern.png); background-repeat:repeat-y; background-position:left; } #col1 { width: 480px; float:left; margin-left: 240px; } #col2 { width: 240px; float:left; margin-left: -720px; } #col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right;}

3 Column Flanking Menus

Lissa Explains It All
It shows how to build 3 different simple layouts. Basic Two Column Layout with Left Menu, Basic two column layout with right menu, and Basic two column layout with header.

3 Columns, The Holy Grail
This is a nice technique. Easy to understand, easy to implement.

body {margin:10px 10px 0px 10px; padding:0px;} #leftcontent {position: absolute; left:10px; top:50px; width:200px; background:#fff; border:1px solid #000;} #centercontent {background:#fff; margin-left: 199px; margin-right:199px; border:1px solid #000; voice-family: "\"}\""; voice-family: inherit; margin-left: 201px; margin-right:201px; } html>body #centercontent { margin-left: 201px; margin-right:201px;} #rightcontent { position: absolute; right:10px; top:50px; width:200px; background:#fff; border:1px solid #000; } #banner { background:#fff; height:40px; border-top:1px solid #000; border-right:1px solid #000; border-left:1px solid #000; voice-family: "\"}\""; voice-family: inherit; height:39px; } html>body #banner { height:39px; }

3 Column Fluid CSS Layout
with faux columns and 100% height

body, html { height:100%;} body { min-width:760px;} #mainContainer { background:transparent url(/examples/images/faux-column-right.png) repeat-y scroll 100% 100px; min-height:100%;} * html #mainContainer { height:100%; } #header { background:#000099 none repeat scroll 0%; padding:10px; } #content { float:right; margin-right:-165px; position:relative; width:100%; } #left { float:left; padding:5px; position:relative; width:155px; } #right { float:right; margin-right:-120px; padding:5px; position:relative; width:110px; } #footer { background:#000099 none repeat scroll 0%; color:#FFFFFF; height:45px; margin-top:-45px; text-align:center; }

3-col layout via CSS:
No tables, no absolute positioning (no positioning at all), no hacks(!), same height of all columns.
#left { float:left; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; } #right { float:right; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; } #middle { margin:0 150px; background:yellow; font-size:80%; }

Multi-Column Layouts Climb Out of the Box
This is part of the article in A List Apart as you can see here they apply the background and border right in the main div.

#container{ background-color:#0ff; float:left; width:500px; border-left:150px solid #0f0; border-right:200px solid #f00;} #leftRail{ float:left; width:150px; margin-left:-150px; position:relative; } #center{ float:left; width:500px; margin-right:-500px; } #rightRail{ float:right; width:200px; margin-right:-200px; position:relative; }

LayoutGala’s 3 Fixed Columns

div#container {width:700px;margin:0 auto} div#wrapper {float:left;width:100%} div#content {margin-right: 300px} div#navigation {float:left;width:150px;margin-left:-150px} div#extra {float:left;width:150px;margin-left:-300px}

One True Layout:
A nice and simple layout with 3 columns all the same height and header and footer divs.

Max Design Liquid Insanity:
A very interesting design. Really good for magazines and/or news layout.