Flying Saucer: Layouts

Centered Fixed Content

Uses ideas from Intensiv Station Templates http://www.intensivstation.ch

This is a nice 2-column fluid layout; the trick is using a background color on the content to give a visual cue that it's a separate section, and then floating it left with a % size. The "menu" on the right is actually just the text that is not in the main content div, placed there because the content is floated. The menu has no separate block or size, because the background color makes it look like a separate space, differentiated from the content block. Nice, simple trick.

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.

        body {
        background-color: #e1ddd9;
        font-size: 12px;
        font-family: Verdana;
        color:#564b47;
        }

        #content {
        float: left;
        width: 70%;
        background: #fff;
        border-right: 2px solid #996666;
        border-bottom: 2px solid #996666;
        margin-right: 15px;

        padding-bottom: 20px;
        }

        #menu p {
        font-size: 11px;
        }

    

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!