The first 2 layouts are from a website (code-sucks.com) which is now hijacked.
You can find most of these layouts at
http://www.free-css.com/free-css-layouts/page10 (there are lots of pages)
This is a layout with 2 fixed column s (leftcolumn and rightcolumn; the left is narrower).
All layouts are for 1024 x 764 pixels.
Created by Keith Donegan of Code-Sucks.com
E-Mail: [email protected]
You can do whatever you want with these layouts,
but it would be greatly appreciated if you gave a link
back to http://www.code-sucks.com
*/
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 0px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 678px;
display: inline;
position: relative;
}
From the same site here is one with a narrow column on each side and one in
the center. At the top of the page is a full width header and below it a
full width navigation
http://www.free-css.com/free-css-layouts/page13/css-layout-154 has faked in
some code to make everything pretty
The css is:
/*
Created by Keith Donegan of Code-Sucks.com
E-Mail: [email protected]
You can do whatever you want with these layouts,
but it would be greatly appreciated if you gave a link
back to http://www.code-sucks.com
*/
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 0px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
position: relative;
}
Here is a fluid 3-column layout from http://glish.com/css/2.asp
(This is one of several layouts at http://glish.com/css/ )
You will appreciate this better if you look at the page!
LAYOUT TECHNIQUES: 3 columns, all fluid
mainleft
#mainleft {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}
Marketing teams input produce cross purposing in view of goal alignments due to knowlege
paucity, necessitating workflow education and orientation. Media sourcing as an acquistion
strategy is counterproductive in a internet environment in virtual component methodology.
Imaging through ideals rather than real world branding, is a perilous undertaking with negative
results. Branding strategies generating motion as activity without reproducible results is a
ultimately futile effort if left in place.
maincenter
#maincenter {
width:34%;
float:left;
background:#fff;
padding-bottom:10px;
}
A much simpler and potentially more useful technique that then 4 column technique using
float:left instead of position:absloute. It suffers from needing percentage widths for each column,
and from potential column wrapping when the browser window is narrowed.
Scroll down for the source.
Enterprise engenderment accelerates initiative platforms, reducing staffing components,
integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental
re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing
on core suitability and cross-training.
mainright
#mainright {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}
This page is part of CSS Layout Techniques, a resource for web developers and designers.
Other Layout Techniques:
3 columns, the holy grail
2 columns, ALA style
4 columns, all fluid
3 columns, all fluid
static width and centered
nested float
Does it validate?
Here is the whole page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : 3 columns, all
fluid</title>
<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#mainright {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}
#maincenter {
width:34%;
float:left;
background:#fff;
padding-bottom:10px;
}
#mainleft {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}
#banner {
background:#fff;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#mainright p { font-size:10px}
#banner h1 { margin:0px; padding:10px}
</style>
</head><body>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all
fluid</h1></div>
<div id="mainleft">
<h1>mainleft</h1>
<pre>#mainleft {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p class="greek">
Marketing teams input produce cross purposing in view of goal
alignments due to knowlege paucity, necessitating workflow education and
orientation. Media sourcing as an acquistion strategy is counterproductive in
a internet environment in virtual component methodology. Imaging through
ideals rather than real world branding, is a perilous undertaking with
negative results. Branding strategies generating motion as activity without
reproducible results is a ultimately futile effort if left in place.
</p>
</div>
<div id="maincenter">
<h1>maincenter</h1>
<pre>#maincenter {
width:34%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p>A much simpler and potentially more useful technique that then <a
class="sitelinksredorange layout" href="8.asp">4 column technique</a> using
float:left instead of position:absloute. It suffers from needing percentage
widths for each column, and from potential column wrapping when the browser
window is narrowed.</p>
<p><strong>Scroll down for the source.</strong></p>
<p class="greek">Enterprise engenderment accelerates initiative
platforms, reducing staffing components, integration of technical
accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental
re-sizing staff requirements through attrition can be accelerated by paridigm
shifts and focusing on core suitability and cross-training. </p>
</div>
<div id="mainright">
<h1>mainright</h1>
<pre>#mainright {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p>
This page is part of <a href="home.asp">CSS Layout Techniques</a>, a
resource for web developers and designers.
</p>
<p>
Other Layout Techniques:<br/>
<a href="7.asp">3 columns, the holy grail</a><br/>
<a href="9.asp">2 columns, ALA style</a><br/>
<a href="8.asp">4 columns, all fluid</a><br/>
<a href="2.asp">3 columns, all fluid </a><br/>
<a href="3.asp">static width and centered</a><br/>
<a href="1.asp">nested float</a><br/>
</p>
<p>
Does it <a
href="http://validator.w3.org/check?uri=http://www.glish.com/css/2.asp?noSRC=
true">validate</a>?
</p>
</div>
<font face="Arial" size=2>
<p>Server object</font> <font face="Arial" size=2>error 'ASP 0177 :
800401f3'</font>
<p>
<font face="Arial" size=2>Server.CreateObject Failed</font>
<p>
<font face="Arial" size=2>/shared/src.asp</font><font face="Arial" size=2>,
line 5</font>
<p>
<font face="Arial" size=2>Invalid ProgID.
For additional information specific to this message please visit the
Microsoft Online Support site located at:
http://www.microsoft.com/contentredirect.asp.
</font>
See also http://www.glish.com/css/9.asp
Also try http://blog.html.it/layoutgala/LayoutGala05.html
Here is its code which we will pick apart:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 5</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left: 50%}
div#navigation{float:left;width:25%;margin-left:-100%}
div#extra{float:left;width:25%;margin-left:-75%}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill
fill fill long text text column text silly very make long very fill silly
make make long make text fill very long text column silly silly very column
long very column filler fill long make filler long silly very long silly
silly silly long filler make column filler make silly long long fill
very.</p>
<p>very make make fill silly long long filler column long make silly silly
column filler fill fill very filler text fill filler column make fill make
text very make make very fill fill long make very filler column very long
very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly
column filler silly text fill text filler filler filler make make make make
text filler fill column filler make silly make text text fill make very
filler column very </p>
<p>column text long column make silly long text filler silly very very very
long filler fill very fill silly very make make filler text filler text make
silly text text long fill fill make text fill long text very silly long long
filler filler fill silly long make column make silly long column long make
very </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very silly
fill text filler silly silly filler fill very make fill column text column
very very column fill fill very silly column silly silly fill fill long
filler </p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> very text make long silly make text
very very text make long filler very make column make silly column fill silly
column long make silly filler column filler silly long long column fill silly
column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
Try to pick apart this one: http://blog.html.it/layoutgala/LayoutGala06.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 6</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left: 50%}
div#navigation{float:left;width:25%;margin-left:-75%}
div#extra{float:left;width:25%;margin-left:-100%}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill
fill fill long text text column text silly very make long very fill silly
make make long make text fill very long text column silly silly very column
long very column filler fill long make filler long silly very long silly
silly silly long filler make column filler make silly long long fill
very.</p>
<p>very make make fill silly long long filler column long make silly silly
column filler fill fill very filler text fill filler column make fill make
text very make make very fill fill long make very filler column very long
very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly
column filler silly text fill text filler filler filler make make make make
text filler fill column filler make silly make text text fill make very
filler column very </p>
<p>column text long column make silly long text filler silly very very very
long filler fill very fill silly very make make filler text filler text make
silly text text long fill fill make text fill long text very silly long long
filler filler fill silly long make column make silly long column long make
very </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very silly
fill text filler silly silly filler fill very make fill column text column
very very column fill fill very silly column silly silly fill fill long
filler </p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> very text make long silly make text
very very text make long filler very make column make silly column fill silly
column long make silly filler column filler silly long long column fill silly
column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
What about http://blog.html.it/layoutgala/LayoutGala23.html
There are many other layouts at https://designshack.net/articles/css/715-awesomely-simple-andfree-css-layouts/ in addition to ones at these sites.
What is a liquid layout? One that resizes when you resize the browser
window. See
http://www.maxdesign.com.au/articles/liquid/ and
http://www.maxdesign.com.au/articles/liquid/liquid-sample1/
Layout 61 from free-css.com http://www.free-css.com/free-css-layouts/page6/css-layout-61
This is a 2-column fixed width layout, with a little extra design pizzazz.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>180 Pixel Left Column, Single Main Column.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<div id="doc" class="yui-t2">
<div id="hd">
<div id="header"><h1><a href="http://www.free-css.com/free-csslayouts.php">Free CSS Layouts</a></h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="content">Content Here</div>
</div>
</div>
<div class="yui-b">
<div id="secondary">Secondary Column</div>
</div>
</div>
<div id="ft">
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
Here’s the index page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>180 Pixel Left Column, Single Main Column.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<div id="doc" class="yui-t2">
<div id="hd">
<div id="header"><h1><a href="http://www.free-css.com/free-csslayouts.php">Free CSS Layouts</a></h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="content">Content Here</div>
</div>
</div>
<div class="yui-b">
<div id="secondary">Secondary Column</div>
</div>
</div>
<div id="ft">
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
And here’s what it looks like:
Layout 95 from free-css.com http://www.free-css.com/free-css-layouts/page8/css-layout-95
This is another 2-column fixed width layout with a bar for navigation right under the header.
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 0px 0px;
background:#F6F0E0;
}
#navigation {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
background-color:#F3F2ED;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background:#F6F0E0;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background:#CCC8B3;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 678px;
display: inline;
position: relative;
}
Here’s the index page
<!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">
<head>
<title>2 Column - fw-22-2-col</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header"><h1><a href="http://www.free-css.com/free-csslayouts.php">Free CSS Layouts</a></h1></div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation"> Navigation Here </div>
<!-- End Navigation -->
<!-- Begin Left Column -->
<div id="leftcolumn"> Left Column </div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn"> Right Column </div>
<!-- End Right Column -->
</div>
<!-- End Wrapper -->
</body>
</html>
And here’s what it looks like:
Layout 114 from free-css http://www.free-css.com/free-css-layouts/page10/css-layout-114
This layout has 3 fixed columns
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background-color:#F3F2ED;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background:#F6F0E0;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background:#CCC8B3;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background:#F6F0E0;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
position: relative;
}
Notice the use of the wrapper
Here is the index page:
<!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">
<head>
<title>3 Column - fw-41-3-col</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header"><h1><a href="http://www.free-css.com/free-csslayouts.php">Free CSS Layouts</a></h1></div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn"> Left Column </div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<div id="content"> This is the content </div>
<!-- End Content Column -->
<!-- Begin Right Column -->
<div id="rightcolumn"> Right Column </div>
<!-- End Right Column -->
</div>
<!-- End Wrapper -->
</body>
</html>
And here is what it looks like:
Layout 200 from free-css.com http://www.free-css.com/free-css-layouts/page17/css-layout200
This is fluid grids and Yahoo User Interface widgets
http://www.free-css.com/free-css-layouts/page17/css-layout-196 has 2 fluid columns
/*******************************************************
TITLE: Fluid Two-Column Layout (Basic) V1.0 (Beta)
DATE: 20060418
AUTHOR: The CSS Tinderbox - http://www.csstinderbox.com
*******************************************************/
body {
margin:0;
padding:0;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}
a{text-decoration:none; color:#000000;}
blockquote {
margin:1em;
padding:.5em;
font-size:.9em;
background-color:#F3F2ED;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}
blockquote p {
margin:.2em;
}
#header {
margin:2em 2em 0 2em;
padding:1em 1.5em;
height:5em;
background-color:#F3F2ED;
border:1px solid #eeeeee;
}
#header h1 {
margin:0;
padding:0;
font-size:1.2em;
}
#header h3 {
margin:0;
padding:0;
font-size:.9em;
}
#leftColumn {
position:absolute;
left:2.25em;
top:10.3em;
width:14em;
margin:0;
padding:1em .5em 2em .5em;
background:#CCC8B3;
border:1px solid #eeeeee;
font-size:.9em;
}
#leftColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}
#leftColumn ul {
margin:1.5em 0 0 0;
padding:0;
list-style:none;
}
#leftColumn li {
margin:0 0 .4em 0;
padding:0;
}
#leftColumn li a {
margin:0 0 0 .2em;
}
#centerColumn {
right:2.25em;
margin-top:.2em;
margin-left: 17.50em;
margin-right:2.25em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left:17.50em;
margin-right:2.25em;
padding:1em .5em 2em .5em;
background:#FFFFFF;
font-size:.9em;
}
html>body #centerColumn {
margin-left:17.50em;
margin-right:2.25em;
}
#centerColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}
#tags {
margin:0 0 .5em 0;
width:10em;
float:left;
border:none;
text-align:left;
}
#tags img {
border:none;
}
#tags p {
margin:0 0 .25em 0;
}
#tags a {
font-size:.7em;
}
Here’s the index page
<!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" lang="en">
<head>
<title>Fluid 2-column layout (basic)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="header">
<h1>header</h1>
<h3>fluid two-column layout (basic)</h3>
</div>
<!--//end #header//-->
<div id="leftColumn">
<h2>leftColumn</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui
salutari levat arte fessos corporis artus, si Palatinas videt aequos aras
remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat
aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum
curat et votis puerorum amicas adplicat auris.</p>
<div id="tags">
<p><a target="_blank" href="http://validator.w3.org/" title="W3C HTML
Validation">XHTML</a></p>
<p><a target="_blank" href="http://jigsaw.w3.org/css-validator/validatoruri.html" title="W3C CSS Validation">CSS</a></p>
<p><a target="_blank" href="http://www.w3.org/TR/WCAG10/" title="Web
Content Accessibility Guidelines">WCAG</a></p>
<p><a target="_blank" rel="nofollow"
href="http://www.csstinderbox.com">The CSS Tinderbox</a></p>
</div>
<!--//end #tags//-->
</div>
<!--//end #leftColumn//-->
<div id="centerColumn">
<h2>centerColumn</h2>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui
salutari levat arte fessos corporis artus, si Palatinas videt aequos aras
remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat
aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum
curat et votis puerorum amicas adplicat auris.</p>
<h2>Header 2</h2>
<p><a href="#">Link Item</a></p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
</ul>
<blockquote>
<p><strong>blockquote</strong><br />
Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui
salutari levat arte fessos corporis artus.</p>
</blockquote>
</div>
<!--//end #centerColumn//-->
</body>
</html>
And here’s what it looks like:
http://www.free-css.com/free-css-layouts/page15/css-layout-174
THIS is a 3-column fluid grid layout
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background:#CCC8B3;}
div#footer{background:#BFBD93;}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left: 50%}
div#navigation{float:left;width:25%;margin-left:-75%}
div#extra{float:left;width:25%;margin-left:-100%}
div#footer{clear:left;width:100%}
Here’s the page……
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Free Css Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
<div id="header"><h1><a href="http://www.free-css.com/free-csslayouts.php">Free CSS Layouts</a></h1></div>
<div id="wrapper">
<div id="content">
<p><strong>Content here.</strong></p>
<p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit
tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit
proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae
volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros.
Vestnunc nonummy</p>
<p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at
wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac
auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus
netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat
facilisi.</p>
<p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing
sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse
curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque
nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat
nibh pellus.</p>
<p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus
pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis
diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit
lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis
pellentesque.</p>
</div>
</div>
<div id="navigation">
<p><strong>Navigation Here</strong></p>
<ul>
<li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
<li><a href="http://www.free-css.com/free-css-layouts.php">Free CSS
Layouts</a></li>
</ul>
</div>
<div id="extra">
<p><strong>More stuff here.</strong></p>
<p>sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque
cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget
temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat
nulla convallis pellentesque.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
And this is what it looks like: