Next Page

Previous Page

## Flying Saucer: 2-column Fluid Pure-CSS Layout for Both Menu and Content

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

This sample page, using ideas from Intensiv Station Templates at http://www.intensivstation.ch, shows how to create a completely fluid "two-column" layout, using just CSS. 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.

As you adjust the size of the containing panel (say, the browser), the page will "reflow" to accomodate. Note in this example the layout will break because of "pre" block below will not overflow nicely--but holds up pretty well till you reduce beyond the minimum necessary for the preserved formatting.

A limitation with this layout is that we can't force the "content" section to be a minimum size (like % of viewport). It will grow to the size necessary to contain the content you give it.

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

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!