SD_Ryoko
Ultra Cool Member
- Reaction score
- 85
A compilation of the templates and different CSS layout ideas that are floating around WebmasterWorld.
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 the template you used.
2 Column Layout with Header and Footer - Origin
fixed sidebar width
fluid content width
footer always below longest "column"
ordered source
flexible header/footer height
sidebar can be on either side
3 Column Layout - Center fixed, Left/Right Fluid - Origin
side columns are Absolutely Positioned and clear the content using margins on internal elements
Center column fixed width
Side columns fluid, to fill width
2 Column, 100% height, with Header and Footer - Origin
Using CSS-P and a Border to create the full stretch
100% height on short page
both columns stretch on longer pages
3 Column liquid Page Layout - Origin
Uses Absolute positioning, suitable for NN4
3 Column, centered with Header and Footer- Origin
This one uses Floats and could easily be adapted for more or less columns
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
2 Column, 100% height, with Header and Footer - Origin
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
3 column fluid layout with header and footer - Origin
Floated Side Columns, Margined center, all control footer
Left/Right fixed, width center fluid.
Source Order: left > right > center
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 the template you used.
2 Column Layout with Header and Footer - Origin
fixed sidebar width
fluid content width
footer always below longest "column"
ordered source
flexible header/footer height
sidebar can be on either side
Code:
<!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>
3 Column Layout - Center fixed, Left/Right Fluid - Origin
side columns are Absolutely Positioned and clear the content using margins on internal elements
Center column fixed width
Side columns fluid, to fill width
Code:
<!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>
2 Column, 100% height, with Header and Footer - Origin
Using CSS-P and a Border to create the full stretch
100% height on short page
both columns stretch on longer pages
Code:
<!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>
3 Column liquid Page Layout - Origin
Uses Absolute positioning, suitable for NN4
Code:
<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">
<!-- The LH Column -->
<DIV class="left" >
<h2>Menu?</h2><p align="justify">Menu content</p>
</div>
<!-- The Center Container -->
<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>
<!-- The RH Column -->
<div class="right"><h2>Menu?</h2>
<p align="justify">More Menu content</p>
</div>
</BODY>
</HTML>
3 Column, centered with Header and Footer- Origin
This one uses Floats and could easily be adapted for more or less columns
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
Code:
<!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>
2 Column, 100% height, with Header and Footer - Origin
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
Code:
<!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>
3 column fluid layout with header and footer - Origin
Floated Side Columns, Margined center, all control footer
Left/Right fixed, width center fluid.
Source Order: left > right > center
Code:
<!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>