HTML/CSS Free CSS Layouts Without Tables

SD_Ryoko

<img src="\usflag.gif" align="left"/>&nbsp; Admini
Staff member
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.
  • Ghan Ghan:
    Chat should show on the sidebar when not logged in now.
  • Ghan Ghan:
    (You'll still need to log in to post messages)
  • Ghan Ghan:
    Test!
  • tom_mai78101 tom_mai78101:
    I must be in a test server.
  • tom_mai78101 tom_mai78101:
    Nice, Twitter tweets embedding now works
  • Wizard Wizard:
    Yup.
  • Ghan Ghan:
    Excellent.
  • Ghan Ghan:
    @tom_mai78101 Hello there.
  • Ghan Ghan:
    Tagging works in the chat too.
  • tom_mai78101 tom_mai78101:
    @Ghan Missed it.
  • Wizard Wizard:
    Still fixing things here and there. Added widgets to the portal, will make it match the ones here on the forum index tomorrow.
  • Ghan Ghan:
    The venerable World Editor Tutorials site has been converted to HTTPS at last.
  • jonas jonas:
    cool
  • jonas jonas:
    and I can even edit my messages, nice
  • seph ir oth seph ir oth:
    GENERAL CHIT CHAT, YOU ARE A BOLD ONE
  • Ghan Ghan:
    Hello there
  • The Helper The Helper:
    this new chatbox is great and the forum software update is great too
    +1
  • The Helper The Helper:
    upgrade has fixed forum registration spam problem
  • tom_mai78101 tom_mai78101:
    Something tells me we might be able to customize the chatbox a bit, considering that there's a gap under every message.
  • Wizard Wizard:
    Going to deploy a fix soon, just had to take some time for myself this weekend.
  • Varine Varine:
    Unbelievable. Time for yourself? How dare you!
  • Wizard Wizard:
    xD
  • tom_mai78101 tom_mai78101:
    Hm, it is now harder to type anything on an Android phone. Pressing Backspace or Enter keys will dismiss the Android keyboard for some reasons.

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top