Select All

CSS
===

/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/

/* -----------------------------------*/
/* ------>>> PAGE STRUCTURE <<<-------*/
/* -----------------------------------*/

/* -----------------------------------*/
/* -------->>> NAVIGATION <<<---------*/
/* -----------------------------------*/

/* -----------------------------------*/
/* --------->>> HEADINGS <<<----------*/
/* -----------------------------------*/

h1, h2, h3, h4, h5, h6 {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 0;
	padding-bottom: 0;
}

h1 {
	font-size: 240%;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 140%;
}

h4 {
	font-size: 100%;
}

h5 {
	font-size: 70%;
}

h6 {
	font-size: 50%;
}

/* -----------------------------------*/
/* ----------->>> LISTS <<<-----------*/
/* -----------------------------------*/

ul, ol, dl {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 0;
	padding-bottom: 0;
}

ul ul, ul ol, ol ul, ol ol {
	margin-top: 0;
	margin-bottom: 0;
}

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

* { outline: none; }

html { font-size:100.01%; }

body {
	font: normal 1em/1.4em arial, helvetica, sans-serif;
	word-spacing: 0.1em;
	color: #333;
}

p {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 0;
	padding-bottom: 0;
}

img {
	border: none;
	padding: 0;
	margin: 0;
}

code, pre { font-family: "Courier New", Courier, monospace; }

label { cursor: pointer; }

table, tr, td {
	font-size: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	vertical-align: top;
}

/* -----------------------------------*/
/* ----------->>> LINKS <<<------------*/
/* -----------------------------------*/

a, a:link, a:visited, a:active {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

/* -----------------------------------*/
/* ----------->>> FORM <<<------------*/
/* -----------------------------------*/

form
{
	padding: 0;
	margin: 0;
}

/* -----------------------------------*/
/* ---------->>> EXTRAS <<<-----------*/
/* -----------------------------------*/

.float_left { float: left; }

.float_right { float: right; }

.clear:after
{
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

CLEARFIX FOR IE
===============

(X)HTML
=======

<h1>Headline (h1)</h1>

<p><strong>Paragraph</strong> Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec. Est id zzril copiosae, vix eu unum nonumy. Ut ius quem velit tollit, ius solum intellegat ut. Ex aliquam feugiat pro, his vocibus contentiones at, quo iusto omnium commune ne. Cum brute congue noster et, nisl <a href="#sitename">euismod menandri</a> est ad.</p>

<h2>Headline (h2)</h2>

<h3>Headline (h3)</h3>

<h4>Headline (h4)</h4>

<ul>
<li>Unordered list</li>
<li>Unordered list</li>
<li>Unordered list</li>

</ul>

<ol>
<li>Ordered list</li>
<li>Ordered list</li>
<li>Ordered list</li>

</ol>

<p class="clear">
<img class="float_left" src="images/image_01.jpg" width="185" height="139" /> <strong> Float left</strong> Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec. 
</p>

<p class="clear">
<img class="float_right" src="images/image_01.jpg" width="185" height="139" /> <strong>Float right</strong> Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec. 
</p>

<table border="1" width="100%">
<tr>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
</tr>
<tr>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
</tr>
<tr>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
<td>
Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec.
</td>
</tr>
</table>

<code><strong>Code</strong> Lorem ipsum ea vis quaestio atomorum, duo no eius mandamus, gloriatur inciderint accommodare ne nec. Est id zzril copiosae, vix eu unum nonumy. Ut ius quem velit tollit, ius solum intellegat ut.</code>

<pre><strong>Pre</strong> Ex aliquam feugiat pro, 
his vocibus contentiones at, 
quo iusto omnium commune ne. 
Cum brute congue noster et, 
nisl euismod menandri est ad.
</pre>

4 basic layouts with:

Fixed width (960px)
jQuery JS and PlugIns for rounded corners and a gallery
Equal height columns JS
Zebra tables

Layout 1
Layout 2
Layout 3
Layout 4

Download all

3 simple basic layouts with:

Fixed width (960px)
Sticky footer

2 columns sidebar left
2 columns sidebar right
3 columns

Download all

Demo

Select All

<!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 #2.1- (Fixed-Fixed)</title>

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

#maincontainer{
width: 960px; /*Width of main container*/
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -960px; /*Set left margin to -(MainContainerWidth)*/
background: #FFD1BF;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
background: #FFEEBF;
text-align: center;
margin: 0 auto;
padding: 4px 0;
width: 960px;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.1- (Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<b>Left Column: <em>200px</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!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>Dynamic Drive: CSS Fixed Layout #2.2- (Fixed-Fixed)</title>
<style type="text/css">

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#maincontainer{
width: 840px; /*Width of main container*/
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin-right: 200px; /*Set right margin to RightColumnWidth*/
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FFD1BF;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
background: #FFEEBF;
text-align: center;
margin: 0 auto;
padding: 4px 0;
width: 840px;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(10)</script>
</div>

</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!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>

<title>CSS Liquid Layout #2.1- (Fixed-Fluid)</title>

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#maincontainer{
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #FFD1BF;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
width: 100%;
background: #FFEEBF;
text-align: center;
padding: 4px 0;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #2.1- (Fixed-Fluid)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<b>Left Column: <em>200px</em></b> <script type="text/javascript">filltext(10)</script>
</div>

</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!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>

<title>CSS Liquid Layout #2.2- (Fluid-Fixed)</title>

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#maincontainer{
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin-right: 200px; /*Set right margin to RightColumnWidth*/
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column in pixels*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FFD1BF;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
width: 100%;
background: #FFEEBF;
text-align: center;
padding: 4px 0;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #2.2- (Fluid-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(10)</script>
</div>

</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!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 #3.1- (Fixed-Fixed-Fixed)</title>
<style type="text/css">

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#maincontainer{
width: 960px; /*Width of main container*/
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin: 0 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: -960px; /*Set margin to that of -(MainContainerWidth)*/
background: #FFD1BF;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FFD1BF;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
width: 960px;
background: #FFEEBF;
text-align: center;
margin: 0 auto;
padding: 4px 0;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

<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>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(10)</script>
</div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!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>

<title>CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</title>

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#maincontainer{
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: #FFD1BF;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FFD1BF;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
width: 100%;
background: #FFEEBF;
text-align: center;
padding: 4px 0;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<div class="innertube"><b>Left Column: <em>230px</em></b> <script type="text/javascript">filltext(10)</script>
</div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!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 #3.2- (Fixed-Fixed-Fixed)</title>
<style type="text/css">

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#maincontainer{
width: 960px; /*Width of main container*/
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin-right: 370px; /*Margin for content column. Should be (RightColumnWidth + LeftColumnWidth)*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -370px; /*Set margin to -(LeftColumnWidth + RightColumnWidth)*/
background: #D9FFBD;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column in pixels*/
margin-left: -190px; /*Set margin to -RightColumnWidth*/
background: #FFD1BF;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
background: #FFEEBF;
text-align: center;
margin: 0 auto;
padding: 4px 0;
width: 960px;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.2- (Fixed-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(45)</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>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!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 #3.3- (Fixed-Fixed-Fixed)</title>
<style type="text/css">

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#maincontainer{
width: 960px; /*Width of main container*/
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin-left: 370px; /*Margin for content column. Should be (RightColumnWidth + LeftColumnWidth)*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -960px; /*Set left margin to -(MainContainerWidth)*/
background: #FFD1BF;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column in pixels*/
margin-left: -780px; /*Set right margin to -(MainContainerWidth - LeftColumnWidth)*/
background: #D9FFBD;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
background: #FFEEBF;
text-align: center;
margin: 0 auto;
padding: 4px 0;
width: 960px;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.3- (Fixed-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(10)</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>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!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 Liquid Layout #3.4- (Fluid-Fixed-Fixed)</title>

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

html, body {
height: 100%;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#maincontainer{
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
background-color: #fff;
margin-right: 430px; /*Set right margin to (LeftColumnWidth + RightColumnWidth)*/
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column in percentage*/
margin-left: -430px; /*Set left margin to -(LeftColumnWidth + RightColumnWidth)*/
background: #D9FFBD;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column in pixels*/
margin-left: -200px; /*Set margin to -(RightColumnWidth)*/
background: #FFD1BF;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
width: 100%;
background: #FFEEBF;
text-align: center;
padding: 4px 0;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.4- (Fluid-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>230px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script>

</div>
</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Demo

Select All

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>CSS Liquid Layout #3.4- (Fixed-Fixed-Fluid)</title>

body{
font: normal 100.1%/1.3em arial, helvetica, sans-serif;
word-spacing: 0.1em;
margin:0;
padding:0;
}

#topsection{
background: #BFDBFF;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#maincontainer{
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
margin-bottom: 0.1pt;
}

#contentwrapper{
float: right;
width: 100%;
margin-left: -430px; /*Set left margin to -(leftColumnWidth + RightColumnWidth)*/
}

#contentcolumn{
background-color: #fff;
margin-left: 430px; /*Set left margin to (leftColumnWidth + RightColumnWidth)*/
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column in pixels*/
background: #FFD1BF;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column in pixels*/
background: #D9FFBD;
}

#footer, #push {
height: 30px; /* .push must be the same height as #footer */
}

#footer{
clear: left;
width: 100%;
background: #FFEEBF;
text-align: center;
padding: 4px 0;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.7- (Fixed-Fixed-Fluid)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<ul id="menu">
<li><a href="#">Item one</a></li>
<li><a href="#" class="current">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#" class="last">Item five</a></li>
</ul>

<div class="innertube"><b>Left Column: <em>230px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</body>
</html>

Basic Layouts

Layouts created by CSS Library with a Sticky Footer added.

Content