# Flying Saucer: Layouts

### Menu (Left)

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5

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

### Menu (right)

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5