HTML Layout Templates

Here is a collection of HTML templates that provides basic website layouts. Each layout includes five main sections used in any website: header, footer, navigation menu, main content area and additional stuff.

Almost all layouts are created using CSS float property and negative margins. There are two things you should know about negative margins: if we apply negative margin on the float side it has the effect of shifting even more the floated elements towards the float side; if we apply a negative margin opposite a float, it creates a void, which leads to content overlapping, and this is very helpful for creating liquid layouts.

In modern websites float-based layouts are being replaced with flexible layouts created using CSS Flexible Box Layout Module.

Two columns, left menu (template 01) Three percentage columns (template 02) Three percentage columns (template 03) Three percentage columns (template 04) Three percentage columns (template 05) Three percentage columns (template 06) Three fixed columns (template 07) Three fixed columns (template 08) Three fixed columns (template 09) Three fixed columns (template 10) Three fixed columns (template 11) Three fixed columns (template 12) Liquid, secondary columns fixed-width (template 13) Liquid, secondary columns fixed-width (template 14) Liquid, secondary columns fixed-width (template 15) Liquid, secondary columns fixed-width (template 16) Liquid, secondary columns fixed-width (template 17) Liquid, secondary columns fixed-width (template 18) Liquid, three columns, hybrid widths (template 19) Liquid, three columns, hybrid widths (template 20) Liquid, three columns, hybrid widths (template 21) Liquid, three columns, hybrid widths (template 22) Two columns liquid, side fixed (template 23) Two columns liquid, side fixed (template 24) Two percentage columns (template 25) Two percentage columns (template 26) One column liquid and two halves (template 27) One column liquid and two halves (template 28) Two percentage columns and one larger (template 29) Two percentage columns and one larger (template 30) Two columns liquid, fixed side and large one (template 31) Two columns liquid, fixed side and large one (template 32) Two columns fixed (template 33) Two columns fixed (template 34) Two columns fixed (template 35) Two columns fixed (template 36) Two columns fixed (template 37) Two columns fixed (template 38) One column fixed and two halves (template 39) One column fixed and two halves (template 40)