<!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>Flying Saucer: 2 Column (Menu and Content) Fluid Layout</title>
<style type="text/css" media="screen">
html, body {
padding: 0px;
margin: 0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color: #564b47;
padding: 0px 20px;
margin: 0px;
}
#content {
float: left;
width: 75%;
background-color: #fff;
margin: 0px 0px 50px 0px;
overflow: auto;
}
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
h1 {
font-size: 11px;
text-transform: uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
padding: 5px 15px;
margin: 0px
}
h2 {
font-size: 14px;
padding-top: 10px;
color: #564b47;
background-color: transparent;
}
#menu p {
font-size: 11px;
}
p, h2, pre {
padding: 10px;
}
</style>
</head>
<body>
<h1>Flying Saucer: Layouts</h1>
<div id="menu">
<h2>
Menu (left)
</h2>
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>
Item 4
</li>
<li>
Item 5
</li>
</ul>
</div>
<div id="content">
<h2>
2 Column Fluid Layout for Both Menu and Content
</h2>
<p>
Uses ideas from <b>Intensiv Station
Templates http://www.intensivstation.ch</b>
</p>
<p>This is a completely fluid 2-column layout; both the content and the menu are given
% sizes, with both layed out as floats--two floats side by side, which fit on the same
horizontal line because of the size parameter.</p>
<p>Note in this example the layout will break because of the "pre" block below--but holds up
pretty well till you reduce beyond the minimum necessary for the preserved formatting.</p>
<pre>
html, body {
padding: 0px;
margin: 0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana;
color: #564b47;
padding: 0px 20px;
margin: 0px;
}
#content {
float: left;
width: 75%;
background-color: #fff;
margin: 0px 0px 50px 0px;
overflow: auto;
}
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
</pre>
<p>
Por efika lingvoinstruado Plurlingveco La Esperantokomunumo estas?
Homa emancipigxo projekto por ebligi al cxiu homo partopreni kiel
individuo en la. Por la provizo de tiu sxanco Lingvaj rajtoj La
malegala disdivido de. Kies parolantoj estas senescepte du aux
plurlingvaj Cxiu komunumano akceptis la taskon lerni. En kursoj por
la lingva! Grandan diversecon de lingvoj en la mondo kiel baron al
komunikado!
</p>
</div>
</body>
</html>