C and S Design.
Search Friendly Programming and Design

Go to -> C and S Design -> Page Templates -> Three Column -> Fluid

Get this CSS: Click to download the CSS file.

CSS code for this design. (Fluid)


/* CSS styles */
body {
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size:1em;
}
h1,h2 {
	color:#0033CC;
}
h1 {
	font-size:1.8em;
}
h2 {
	font-size:1.4em;
}
p {
	padding:5px;
	text-indent:20px;
}
#main {
	position:relative;
	text-align:left;
}
#header {
	position:relative;
	text-align:center;
	width:750px;
	height:120px;
	border:0px solid orange;
	margin:0px auto;
}
#header img {
	position:relative;
	border:0px;
	margin:0px auto;
}
#navigation {
	position:absolute;
	width:150px;
	float:left;
	padding:5px 2px;
	margin:10px 0px 15px 0px;
	border:3px solid black;
	border-width:0px 3px 0px 0px;
	z-index:3;
}
#navigation a {
	color:#00FF00;
	display:block;
	text-decoration:underline;
	margin:0px 0px 5px 0px;
}
#navigation a:link {
	
}
#navigation a:active {
}
#navigation a:visited {
}
#navigation a:hover {
	color:#FF9933;
	text-decoration:none;
}
#sponsors {
	position:absolute;
	left:80%;
	width:18%;
	padding:5px 0px 5px 10px;
	margin:10px 0px 15px 0px;
	border:3px solid blue;
	border-width:0px 0px 0px 3px;
	z-index:1;
}
#content {
	position:relative;
	padding:5px 0px 5px 160px;
	margin:10px 21% 15px 0px;
	border:0px dashed blue;
	z-index:2;
	background-color:#FFFFFF;
}
#footer {
	position:relative;
	text-align:center;
	font-size:0.8em;
	margin:0px auto;
	border:0px dotted red;
}
#design {
	position:relative;
	width:75%;
	margin:0px auto 20px auto;
}
#design img {
	border:0px;
}
.top_block {
	position:relative;
	overflow:auto;
	width:40%;
	height:150px;
	float:left;
	padding:5px 2px;
	margin:10px 0px 10px 5px;
	border:0px dashed blue;
}
.clearing {
	clear:both;
}
.para {
	position:relative;
	text-indent:15px;
	font-size:1em;
	padding:5px;
}
#crumbtrail {
	position:relative;
	float:left;
	font-size:0.75em;
	background-color: #FFFFFF;
	text-decoration:none;
	text-align:left;
	z-index:20;
}
#crumbtrail a:link {
	color:#0000FF;
}
#crumbtrail a:visited {
	color:#0000FF;
}
#crumbtrail a:hover {
	color:#FFFFFF;
	background-color: #000000;
	text-decoration:underline;
}
#crumbtrail a:active {
	color:#0000FF;
}

HTML code for this design. (Fluid)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Based Templates - Three Column Fluid - C and S _ 
	Design</title>
<meta http-equiv="Content-Type" content="text/html; _ 
	charset=iso-8859-1"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link type="text/css" rel="stylesheet" _ 
	href="style.css" />
</head>

<body>
<div id="main">
<div id="header"><a href="/"><img _ 
	src="/images/logo/icon_header.gif" alt="SE Friendly _ 
	Programming Logo"/></a></div>
<!-- header -->
<div id="navigation">Left Side <br />
<br />
<br />
<a href="#" title="Sample Link">Sample _ 
	Link</a> <a href="#" title="Sample _ 
	Link">Sample
Link</a> <a href="#" title="Sample _ 
	Link">Sample Link</a> <a href="#" _ 
	title="Sample Link">Sample
Link</a> <a href="#" title="Sample _ 
	Link">Sample Link</a> <a href="#" _ 
	title="Sample Link">Sample
Link</a> <a href="#" title="Sample _ 
	Link">Sample Link</a> <a href="#" _ 
	title="Sample Link">Sample
Link</a> </div>
<div id="sponsors">Right Side <br />
<br />
<br />
This right side column can be sized for showing sponsored links or _ 
	categorised
navigation</div>
<div id="content"> <br />

<h1>Search Friendly Programming</h1>
<h2>CSS Based Templates</h2>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna _ 
	aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo _ 
	dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est _ 
	Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur _ 
	sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna _ 
	aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo _ 
	dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est _ 
	Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur _ 
	sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna _ 
	aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo _ 
	dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est _ 
	Lorem ipsum
dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in _ 
	vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla _ 
	facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit _ 
	praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem _ 
	ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh _ 
	euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad _ 
	minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut _ 
	aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in _ 
	hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu _ 
	feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui _ 
	blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla _ 
	facilisi. </p>
</div>
<!-- content -->
<div class="clearing"></div>
<!-- clearing -->
<div id="footer"> <b>C and S Design<br />
Search Engine Friendly Programming</b><br/>
<span class='small'>Demonstrations, Tutorials and Code _ 
	Samples</span>
<div id="design"> <br />
<span style='font-size: .8em;color: #0000FF; font-family: _ 
	Verdana, Arial, Helvetica, sans-serif;'>copyright
© C and S Design 2004 </span><br />
<a href='http://www.candsdesign.co.uk'>Website Design and _ 
	SE Friendly Coding</a>
C and S Design<br />
<br />
<a class='img' _ 
	href='http://validator.w3.org/check/referer'><img class='w3cl' _ 
	src='/images/w3org/w3c_xhtml.gif' alt='Valid HTML 4.01!' _ 
	/></a>
<a class='img' _ 
	href='http://jigsaw.w3.org/css-validator/'><img class='w3cr' _ 
	src='/images/w3org/w3ccss.gif' alt='Valid CSS!' /></a>
</div>
<!--design-->
</div>
<!-- footer -->
</div>
<!-- main -->

</body>
</html>

C and S Design. Search Friendly Programming and Design

C and S Design.
Search Friendly Programming and Design