Free CSS Layouts Without Tables

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

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>
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top