Flying Saucer: 3 Column Fluid Layout

Next Page

Previous Page

### Layouts

Two-column Fluid
Menu Item 2
Menu Item 3
Menu Item 4
Menu Item 5

Flying Saucer

Pure CSS Layouts

3-Column Fluid: This sample page, using ideas from Intensiv Station Templates at http://www.intensivstation.ch, shows how to create a "three-column" layout using just CSS. This is a 3-column fluid layout with two menu areas. The "menus" are both positioned using relative (%) position, and adjust to the size of the viewport. There is a "content" section in the middle.

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. Also, finding the correct % for width and positioning of the three elements is a little tricky; you may need to play around with the numbers a little.

                #right, #content, #left {
                    border: 1px solid #564b47;
                    padding: 0px;
                    margin: 0px;
                    padding-left: 10px;
                }

                #left {
                    position: absolute;
                    left: 2%;
                    width: 20%;
                    background-color: #ffffff;
                }

                #content {
                    position: absolute;
                    left: 25%;
                    width: 50%;
                    background-color: #ffffff;
                    overflow: auto;
                }

                #right {
                    position: absolute;
                    left: 77%;
                    width: 20%;
                    background-color: #ffffff;
                    overflow: auto;
                    margin-left: 10px;
                }

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! Registaroj emas konsideri la grandan diversecon de lingvoj; kaj lingva identeco sed ne limigite de ili Ni asertas ke, de komunikado kaj evoluigo se gxi ne estas bazita sur respekto al kaj, estas movado por transnacia edukado. Movado por lingva diverseco Homa emancipigxo Cxiu lingvo liberigas kaj malliberigas siajn anojn donante.

### Menu

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
Menu Item 5