[template] xhtml1.1 layouts fr_graph

fr. http://alanwho.com/7-css-xhtml-11-layouts/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="centre-Type" centre="text/html; charset=iso-8859-1" />

<title>3 Column Liquid Layout (Equal Column Heights)</title>

<style type="text/css">


/* Layout Name: 3 Column Liquid Equal Column Heights Layout
* Version: 1.0
* Author: Alan Who?
* Author URI: http://www.alanwho.com
*
* License: GNU General Public License
*
* Copyright (C) 2005 Alan Who?
*/


/* ----------------------- start tags ------------------------- */
body { min-width: 630px; margin: 0em; padding: 0em; }
* html body { overflow: hidden; }
/* ----------------------- end tags ------------------------- */


/* ----------------------- start #contain ------------------------- */
#contain { padding-left: 200px; padding-right: 190px; overflow: hidden; }
#contain .column { text-align: justify; position: relative; float: left; padding-bottom: 1001em; margin-bottom: -1000em; }
#contain .column h1 { padding: .25em; }
#contain .column p { padding: .5em; line-height: 1.25em; }
/* ----------------------- end #contain ------------------------- */


/* ----------------------- start #header ------------------------- */
#header { padding: 2em; background: #000000; color: #ffffff; }
/* ----------------------- end #header ------------------------- */


/* ----------------------- start #left ------------------------- */
#left { width: 180px; padding: 0 10px; right: 240px; margin-left: -100%; background-color: #333333; color: #ffffff; }
* html #left { left: 150px; }
#left ul li { list-style:none; padding: .5em; }
/* ----------------------- end #left ------------------------- */


/* ----------------------- start #centre ------------------------- */
#centre { padding: 10px 20px; width: 100%; background-color: #666666; color: #ffffff; }
/* ----------------------- end #centre ------------------------- */


/* ----------------------- start #right ------------------------- */
#right { width: 130px; padding: 0 10px; margin-right: -100%; background-color: #999999; color: #ffffff; }
#right ul li { list-style:none; padding: .5em; }
/* ----------------------- end #right ------------------------- */


/* ----------------------- start #footer-wrapper ------------------------- */
* html #footer-wrapper { float: left; position: relative; width: 100%; padding-bottom: 10010px;
margin-bottom: -10000px; background: #FFF; }
/* ----------------------- end #footer-wrapper ------------------------- */


/* ----------------------- start #footer ------------------------- */
#footer { clear: both; padding: 1em; background-color: #f6f6f6; }
/* ----------------------- end #footer ------------------------- */


</style>

</head>

<body>
<!-- open header --><div id="header">header<!-- close header --></div>

<!-- open contain --><div id="contain">

<!-- open centre --><div id="centre" class="column">
<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean condimentum purus ut erat. Proin id erat. Vivamus mollis sapien id erat. Aliquam condimentum, sem at blandit ullamcorper, massa diam venenatis nisl, id porta magna ligula at elit. Proin luctus, pede at vulputate scelerisque, libero mi pellentesque elit, non egestas dui dui sit amet massa. Mauris sit amet leo vitae diam aliquet congue. Cras fermentum. Nullam sodales elit nec nibh volutpat dapibus. Phasellus hendrerit metus at orci. Quisque neque felis, viverra at, tincidunt sit amet, consequat in, justo.</p>
<!-- close centre --></div>

<!-- open left --><div id="left" class="column">
<h1>Navbar</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
<!-- close left --></div>

<!-- open right --><div id="right" class="column">
<h1>Sidebar</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
<!-- close right --></div>
<!-- close contain --></div>

<!-- open footer-wrapper --><div id="footer-wrapper">

<!-- open footer --><div id="footer">footer<!-- close footer --></div>

<!-- close footer-wrapper --></div>

</body>

</html>