Forum Moderators: not2easy
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]
Summary
<!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]
<!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>
<!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]
<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>
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>
<!-- tablerow --></div>
<!-- thetable --></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]
Notes (or Pros and Cons):
<!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>
<!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]
<!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>
Summary:
<!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]
If you come across any I may have missed, then please let me know so they can be added
-Suzy
