Flying Saucer: Layouts

Menu (Left)



CONTENT (Left Block)

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

A 4-column fluid layout. The trick here is positioning each block absolutely, but with % for left and width position. This should resize fluidly, but will break at some small sizes, particularly on this sample page as we have <pre> blocks

A downside of this is that vertical height is based on the content in this layout, so the blocks may appear different heights, depending on the viewport size.

CONTENT (Right Block) 

    #left {
    position: absolute;
    left: 2%;
    width: 19%;
    }

    #content-left {
    position: absolute;
    left: 22%;
    width: 28%;
    overflow: auto;
    }

    #content-right {
    position: absolute;
    left: 51%;
    width: 28%;
    overflow: auto;
    }

    #right {
    position: absolute;
    left: 80%;
    width: 18%;
    overflow: auto;
    }