2, 3, Multi Column CSS Templates and Layouts CSS forum at WebmasterWorld

Welcome to WebmasterWorld Guest from 23.22.76.170
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,

Pubcon Website

Home / Forums Index / Code, Content, and Presentation / CSS

Forum Library : Charter : Moderator: open
CSS Forum

2, 3, Multi Column CSS Templates and Layouts
A WebmasterWorld Repository

SuzyUK

msg:1220412

1:27 pm on Jul 24, 2004 (gmt 0)

A compilation of the templates and different CSS layout ideas that are floating around WebmasterWorld, written by members here (in no particular order)

A singular source/reference point for all ideas

This thread is a reference point only, if you wish to start a discussion or need help with any of the techniques start a new thread and refer to this thread including its message number.

I'm sure there are lots more here too, so if you find more layouts in The CSS Forum, drop me a link and I'll add it here..

Thanks
Suzy

[edited by: SuzyUK at 10:11 am (utc) on Nov. 26, 2004]

SuzyUK

msg:1220413

1:50 pm on Jul 24, 2004 (gmt 0)

2 Column Layout with Header and Footer - Origin [webmasterworld.com]
Using Floats and Negative Margin Technique

Summary

fixed sidebar width
fluid content width
footer always below longest "column"
ordered source
flexible header/footer height
sidebar can be on either side

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
html, body {
margin:0;
padding:0;
}

#wrapper {
width:100%;
float:left;
margin-right:-180px;
}

#content {
margin-right:180px;
background: #ddd;
padding-bottom: 20px;
border-top: 1px solid lime; /* to stop collapsing margins in Moz */
}

#nav {
width: 180px;
float: right;
background:#aaa;
}

.footer, .header {
background: #eee;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
margin: 0;
clear: both;
width: 100%; /*ie requires this or height */
}

</style>
</head>
<body>
<div class="header"><h1>Header text here</h1></div>
<div id="wrapper">
<div id="content">
<h1>content</h1>
<p>..insert favaurite foo text here....</p>
</div>
</div>

<div id="nav">
<h1>sidebar</h1>
<p>..more favourite foo......</p>
</div>

<div class="footer"><p>Footer text here</p></div>
</body>
</html>

Notes:
Any top and bottom "gaps" that you may experience in Moz are due to collapsing margins on the internal elements. To lose these a 1px border(lime) has been placed at the top of the content div.. (1px top padding would serve the same purpose)

To swap the sidebar from right to left.. just swap the floats and margins on the wrapper and content divs in the CSS.

#wrapper {
width:100%;
float: right; /* swap */
margin-left:-180px; /* swap */
}
#content {
margin-left: 180px; /* swap */
background: #ddd;
border-top: 1px solid lime; /* to stop collapsing margins in Moz */
}

[edited by: SuzyUK at 9:54 am (utc) on Nov. 26, 2004]

SuzyUK

msg:1220414

2:12 pm on Jul 24, 2004 (gmt 0)

3 Column Layout - Center fixed, Left/Right Fluid - Origin [webmasterworld.com]
side columns are Absolutely Positioned and clear the content using margins on internal elements

Center column fixed width
Side columns fluid, to fill width

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Column CSS Template - Left/Right Fluid - Center Fixed</title>

<style type="text/css">
html,body {padding: 0; margin: 0;}
body {text-align: center; /* IE center */}
#content {
width: 760px;
margin: 0 auto; /* compliant browser center */
text-align: left; /* re align text */
}
.column {
width: 50%;
position: absolute;
top: 0;
text-align: left;
}

.left {left: 0;}
.right {right: 0;}

#leftcol {margin-right: 380px;background: #eee; }
#rightcol {margin-left: 380px; background: #ccc;}
</style>

</head>
<body>

<div id="content">Center column fluid</div>

<div class="left column">
<div id="leftcol">Left column fixed width</div>
</div>

<div class="right column">
<div id="rightcol">Right column Fluid</div>
</div>

</body>
</html>

SuzyUK

msg:1220415

3:59 pm on Jul 24, 2004 (gmt 0)

2 Column, 100% height, with Header and Footer - Origin [webmasterworld.com]
Using CSS-P and a Border to create the full stretch

100% height on short page
both columns stretch on longer pages

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Two cols</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
color: #fff;
height: 100%;
text-align: center;
}
#container {
position: relative;
width: 560px;
margin: 0 auto;
text-align: left;
border-left: 200px solid #f00; /* left border creates background for left column ~ colour only */
background: #ff0;
min-height: 100%; /* this is where inheritance stops */
}
/* the following changes the width per box model hack
and then puts in the 100% height (equivalent to min-height) for IE/Win only */
/*\ hide from Mac it's not broken */
* html #container {
width: 760px;
w\idth: 560px; /* should be 760 if in quirks mode */
height: 100%;
}
/* end hide */
/* trick to get compliant browsers to clear the (right) floated div if required */
#container::after{
content: ".";
display: block;
height: 0;
line-height: 0;
font-size: 1px;
clear: both;
visibility: hidden;
}
#header {
position: absolute;
z-index: 100;
left: 50%;
margin: 0 0 0 -480px;
padding: 0;
height: 100px;
width: 760px;
background: #008;
}
#footer
{
position: absolute;
left: 50%;
bottom: 0;
margin: 0 0 0 -480px;
padding: 0;
height: 50px;
width: 760px;
background: #060;
}
#left-col
{
position: relative;
margin: 0 0 0 -190px;
padding: 100px 0 60px 0;
width: 180px;
background: #eee;
color: #000;
}
#right-col
{
position: relative;
float: right;
margin: 100px 0 0 0;
padding: 0 0 60px 0;
width: 550px;
color: #000;
}
p {margin: 0 20px; padding: 10px 0;}
</style>
</head>
<body>
<div id="container">
<div id="header"><p>Header<p></div>
<div id="right-col"><p>Lorem ipsum dolor sit amet</p></div>
<div id="left-col"><p>left</p></div>
<div id="footer"><p>footer text</p></div>
</div>
</body>
</html>

[edited by: SuzyUK at 9:17 am (utc) on July 30, 2004]

SuzyUK

msg:1220416

4:18 pm on Jul 24, 2004 (gmt 0)

3 Column liquid Page Layout - Origin [webmasterworld.com]
Uses Absolute positioning, suitable for NN4

<HTML>
<HEAD>
<TITLE>3 Column Liquid Page Layout</TITLE>
<META name="description" content="3 Column 'Liquid' page layout with pure CSS">
<META name="keywords" content="3 column liquid page layout CSS">
<style type="text/css" media="screen">
.left {
position: absolute;
left: 2%;
width: 20%;
}
.content {
position: relative;
left: 22%;
width: 50%
}
.right {
position: absolute;
left: 76%;
top: 10px;
width: auto;
}
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">

<DIV class="left" >
<h2>Menu?</h2><p align="justify">Menu content</p>
</div>

<DIV class="content">
<div>
<h2>Content1</h2><p align="justify">The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem and then took a break. The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem. </p>
</div>
<div>
<h2>Content2</h2><p align="justify">The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem and then took a break. The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem. </p>
</div>
</div>

<div class="right"><h2>Menu?</h2>
<p align="justify">More Menu content</p>
</div>
</BODY>
</HTML>

SuzyUK

msg:1220417

4:45 pm on Jul 24, 2004 (gmt 0)

3 Column - 100% height with Header and Footer - Origin [webmasterworld.com]
Uses Table Properties and seperate CSS for IE

Experimental in nature designed to show what the table properties will do
Believed to crash IE/mac sometimes

Update available
**Updated - July'09: for IE7 & 8 :
[webmasterworld.com...]

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head>
<title>3 Column CSS Layout - Fixed Header and Footer</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import "v3.css"; </style>
</head>
<body>
<div id="header"><h1>3 Column CSS Layout <span>a work in progress»</span></h1>
</div>
<div class="thetable">
<div class="tablerow">
<div class="tablecell one">
<p>CSS - 100% Height layout.</p>
<ul>
<li>three column stretch</li>
<li>fixed height header and footer</li>
<li>footer spans 3 columns</li>
</ul>
</div>
<div class="tablecell two"><div class="pad">
<h2>Middle Column</h2>
<p>This is a flexible width column, it is the width of the screen and clearance of the side columns in <strong>IE</strong> is produced by <em>left and right padding</em>.</p>
</div></div>
<div class="tablecell three">
<p>This version is done using the star selector hack..</p>
<p>IE6 Quirks still required</p>
</div>
</div>
</div>
<div id="footer"><p>and this of course is the footer</p></div>
</body>
</html>

v3.css

html, body {height: 100%; width: 100%; margin: 0; padding: 0; border: 0;}
.thetable {
position: relative;
display: table;
width: 100%;
margin: 0;
padding: 0;
border: 0;
clear: both;
border-spacing: 0; /* required by Opera 6 */
}
/* hide this from opera6 */
head:first-child+body div.thetable {height: 100%;}
/* IE/Win required so floated tablecells take the height
and overcome the display for IE/Mac */
* html .thetable {display: block; height: 100%;}
.tablerow {display: table-row;}
* html .tablerow {display: block;}
.tablecell{
display: table-cell;
border: 0;
padding: 0;
margin: 0;
padding-top: 100px;
padding-bottom: 50px;
vertical-align: top;
min-height: 100%; /* opera6 needs min-height but moz/IE needs height */
}
/* hide this from opera6 */
head:first-child+body div.tablecell {height: 100%;}
/* added for mozilla which worked for others too,
but op6 still needed min-height so hide this rule */
/* for IEwin/mac Only to override display: table-cell; */
* html .tablecell
{display: block; float: left; height: 100%;}
.one{
width: 180px;
background: violet;
position: relative;
border-right: 1px dotted #000;
z-index: 5;
}
.two{
width: auto;
background: yellow;
position: relative;
}
/* all foats need widths in IE/Mac
so had to workaround center column width with padding/margins */
* html .two {
width: 100%;
margin-left: -181px;
margin-right: -201px;
}
* html .two .pad {padding: 0 200px 0 180px;}
.three{
width: 200px;
background: lime;
position: relative;
border-left: 1px dotted #000;
}
#header{
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
background: #000080;
width: 100%;
height: 100px;
color: #fff;
z-index: 10;
border-bottom: 2px dotted lime;
margin-right: -15px; /* see ie/mac hack below */
}
/* to correct an IE/Mac issue -15px positioning bug */
/* the following is invisible to IE Mac : note id selector must be used */
/* commented backslash hack v2 \*/
#header {margin-right: 0px;}
/* end hack */
#footer{
clear: both;
margin-top: -40px;
width: 100%;
background: #000080;
color: white;
z-index: 100;
min-height: 40px; /* IE needs height though */
position: relative; /* required by OP6 but correct value fed re hack below */
}
/* hide this from opera6 */
head:first-child+body div#footer {position: absolute;}
* html #footer{height: 40px;} /* added to overcome content overflow min-height rule */
/**** some general formatting styles **********/
body{font-size: 0.8em; font-family: verdana, tahoma, arial, sans-serif;}
a:link, a:visited{
color: #fff;
background: transparent;
text-decoration: underline;
}
a:hover{
color: lime;
background: transparent;
}
.tablecell a:link, .tablecell a:visited {
color: #009;
background: transparent;
text-decoration: underline;
}
.tablecell a:hover {
color: #fff;
background: #009;
text-decoration: none;}
ul {padding-right: 0.5em;}
/* removing margins and using padding to format instead corrects an Opera and IE display error */
p {padding: 0.5em 1em 0 1em; margin: 0;}
h1, h2, h3 {font-family: georgia; padding: 0.5em 2em; margin: 0;}
h1 {font-size: 1.2em;}
h2 {font-size: 1.1em;}
h3 {font-size: 1em;}

[edited by: SuzyUK at 12:07 pm (utc) on July 27, 2009]

SuzyUK

msg:1220418

4:56 pm on Jul 24, 2004 (gmt 0)

3 Column, centered with Header and Footer- Origin [webmasterworld.com]
This one uses Floats and could easily be adapted for more or less columns

Notes (or Pros and Cons):

probably best on a fixed/explicit width unless you're happy with percentage width side columns.
the background colors/effect would need to be done with a background image (so another reason for fixed width!).. but a lot of fun could be had...
footer can't be "fixed" to bottom of page but the use of min-height (height in IE) on the #container would allow you to place it a suitable distance down a shorter page.
all columns control footer
can be very easily adapted to 2 columns

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Floaty 3 col</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; height: 100%; text-align: center;
min-width: 700px;
}
#bgcontain {
background: #eee url(shadow.jpg) repeat-y 150px 0;
width: 700px;
margin: 0 auto;
text-align: left;
}
#container {
padding: 0;
float: left;
width: 100%;
clear: both;
min-height: 250px;
}
/*\ IE/Win min height hack */
* html #container {height: 250px;}
/* */
#leftwrap {
float: left;
width: 520px;
}
#rightbar {
float: left;
width: 180px;
background: transparent;
}
#leftbar {
float: left;
width: 150px;
}
#content {
float: right;
width: 370px;
min-height: 100%;
background: transparent;
}
#footer, #header {width: 700px; margin: 0 auto; background: gold; clear: both;}
/* general */
p {margin: 0; padding: 10px;}
a {display: block; color: blue; background: transparent;}
a:hover {text-indent: 0; color: red;}
a span {display: none;}
a:hover span {display: block;}
</style>
</head>
<body>
<div id="bgcontain">
<div id="header"><p>header text here</p></div>
<div id="container">
<div id="leftwrap">
<div id="content">
<p><a href="/">centercontent<br /><br /><span>centercontent<br /><br />centercontent<br /><br />centercontent<br /><br />centercontent</span></a></p>
</div>
<div id="leftbar"><p><a href="/">left bar<br /><br /><span>left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar</span></a></p></div>
</div>
<div id="rightbar"><p><a href="/">right bar<br /><br /><span>right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar</span></a></p></div>
</div>
<div id="footer"><p>footer text here</p>
</div>
</div>
</body>
</html>

SuzyUK

msg:1220419

9:24 am on Jul 30, 2004 (gmt 0)

2 Column, 100% height, with Header and Footer - Origin [webmasterworld.com]
Using CSS-P and a "Faux Column Image" to create the full stretch

100% height on short page - (optional)
column stretch on longer pages
similar to the one in msg#4 (#:1220415)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Two cols - using faux column image</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
color: #fff;
height: 100%;
text-align: center;
}
#container {
position: relative;
width: 760px;
margin: 0 auto;
text-align: left;
background: #ff0; /* replave this with background image of choice */
min-height: 100%; /* this is where inheritance stops */
}
/*\ Give to IE/Win but hide from IE/Mac - unfortuantely it won't support either min-height method */
* html #container {
height: 100%;
}
/* end hide */
/* trick to get compliant browsers to clear the (right) floated div if required */
#container::after{
content: ".";
display: block;
height: 0;
line-height: 0;
font-size: 1px;
clear: both;
visibility: hidden;
}
#header {
position: absolute;
z-index: 100;
left: 50%;
margin: 0 0 0 -380px;
padding: 0;
height: 100px;
width: 760px;
background: #008;
}
#footer
{
position: absolute;
left: 50%;
bottom: 0;
margin: 0 0 0 -380px;
padding: 0;
height: 50px;
width: 760px;
background: #060;
}
#left-col
{
position: relative;
float: left;
margin: 100px 0 0 0;
padding: 0 0 60px 0;
width: 180px;
background: #eee; /* this is for illustration only */
color: #000;
}
#right-col
{
position: relative;
float: right;
margin: 100px 0 0 0;
padding: 0 0 60px 0;
width: 550px;
color: #000;
}
p {margin: 10px 20px;}
</style>
</head>
<body>
<div id="container">
<div id="header"><p>Header<p></div>
<div id="right-col"><p>Lorem ipsum dolor sit amet</p></div>
<div id="left-col"><p>left</p>
</div>
<div id="footer"><p>footer text</p></div>
</div>
</body>
</html>

[edited by: SuzyUK at 6:43 pm (utc) on Mar. 18, 2008]

SuzyUK

msg:1220420

12:52 am on Dec 31, 2004 (gmt 0)

3 column fluid layout with header and footer - Origin [webmasterworld.com]
Floated Side Columns, Margined center, all control footer

Left/Right fixed, width center fluid.
Source Order: left > right > center

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
body {
margin:10px 10px 0px 10px;
padding:0px;
background-color:#9ECBE2;
}
#header {
background:#fff;
height:40px;
}
#leftcontent {
margin-top:5px;
width:200px;
float:left;
}
#rightcontent {
margin-top: 5px;
float: right;
width: 130px;
}
#centercontent {
margin-top:5px;
margin-bottom: -19px;
margin-left: 207px;
margin-right:137px;
}
#footer {
background:#fff;
margin-bottom:10px;
height:40px;
}
.contentdivs{
background-color:#fff;
margin:0px;
padding:0px;
border-style:double;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="leftcontent">
<div class="contentdivs">left: this expands with content<br></div>
<div class="contentdivs">left: this expands with content<br></div>
<div class="contentdivs">left: expands with content<br></div>
</div>
<div id="rightcontent">
<div class="contentdivs">right: this expands with content</div>
<div class="contentdivs">right: this expands with content</div>
</div>
<div id="centercontent">
<div class="contentdivs">center: this expands with content</div>
<div class="contentdivs">center: this expands with content</div>
</div>
<br style="clear:both">
<div id="footer">footer</div>
</div>
</body>
</html>

SuzyUK

msg:3604331

6:21 pm on Mar 18, 2008 (gmt 0)

3 Column, source ordered, all control footer, Header and Footer - Origin - tmac187 [webmasterworld.com]

Summary:

footer always below longest column, no matter which one it is
columns could be in any order
can use 'faux columns' to create the full stretch column look

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Fixed Layout (Fixed-Fixed-Fixed)</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
position:absolute;
width:840px;
top:0;
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 90px 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
margin-top:90px;
}
#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
margin-top:90px;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to CSS", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>
<div id="footer">Footer Div Here</div>
<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1-
(Fixed-Fixed-Fixed)</h1></div></div>
</div>
</body>
</html>

[edited by: SuzyUK at 6:23 pm (utc) on Mar. 18, 2008]

SuzyUK

msg:3604344

6:33 pm on Mar 18, 2008 (gmt 0)

all of these templates are taken from various threads on this forum, the origin is always linked to.

If you come across any I may have missed, then please let me know so they can be added

-Suzy

Global Options:

top

home

open messages

active posts

Home / Forums Index / Code, Content, and Presentation / CSS

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved