Jump to navigation

Tutorial – Page Layout

Tim Officer

Hybrid Layouts

Most websites will usually use a combination of fixed-width, liquid, and elastic containers. To create a hybrid, try setting your sidebar to a fixed-width pixel amount and the content area to a liquid percentage.

The fixed sidebar and liquid content area design is one of the most common hybrids. As can be seen below, the sidebar remains the same size in both windows, but the content wrap to fill the space in the larger window.

a hybrid design, in a narrow window
A hybrid design in a narrow browser window
a hybrid design, in a large window
The same hybrid design, in a large window