<!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: Centered Fluid Content</title>
    <style type="text/css" media="screen">
        body {
            background-color: #e1ddd9;
            font-size: 12px;
            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
            color: #564b47;
            margin: 20px 140px 20px 140px;
            text-align: center;
        }

        #content {
            width: 100%;
            padding: 0px;
            text-align: left;
            background-color: #fff;
            overflow: auto;
        }

        p, h1, pre {
            margin: 0px;
            padding: 10px;
        }

        h1 {
            font-size: 11px;
            text-transform: uppercase;
            text-align: right;
            color: #564b47;
            background-color: #90897a;
        }
    </style>
</head>

<body>

<div id="content">
    <h1>Flying Saucer: Layouts</h1>

    <h2>
        Centered Fluid Content
    </h2>

    <p>
        Uses ideas from <b>Intensiv Station
        Templates http://www.intensivstation.ch</b>
    </p>

    <p>This is a simple, centered-content fluid layout; there are fixed margins
        on either side, and the width of the center is set to 100% of what remains.</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>
        body {
        background-color: #e1ddd9;
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
        color: #564b47;
        margin: 20px 140px 20px 140px;
        text-align: center;
        }

        #content {
        width: 100%;
        padding: 0px;
        text-align: left;
        background-color: #fff;
        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>