Flying Saucer: Layouts

Menu (Left)

3-col Center Fluid Layout with Header and Footer

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

A 3 column layout where the center takes up available space; menus on both sides are fixed at a pixel size. As menus are not vertically sized, again uses the trick of setting menu and bg color the same; the right menu in this case shows that you can set a bg color if you want--you just can't control the height in this case. This layout supports header and footer banners. Note that the footer just appears at the end of the text--not necessarily the bottom of the viewport.

        #left {
        position: absolute;
        left: 0px;
        width: 190px;
        color: #564b47;
        margin: 0px;
        padding: 0px;
        }

        #content {
        margin: 0px 190px 0px 190px;
        border-left: 2px solid #564b47;
        border-right: 2px solid #564b47;
        border-bottom: 2px solid #564b47;
        padding: 0px;
        background-color: #ffffff;
        }

        #right {
        position: absolute;
        right: 0px;
        width: 190px;
        color: #564b47;
        background-color: #ff99cc;
        margin: 0px;
        padding: 0px;
        }
    

XML/CSS 2.1 in Pure Java