HTML Layout Templates

Here is a collection of HTML templates providing basic website layouts.

Each layout includes the following five main sections that are used on any website:

• header

• footer

• navigation menu

• main content area

• extra stuff

• 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)

Almost all layouts are created with the CSS float property and negative margins. When working with negative margins on floated elements, keep in mind: applying a negative margin on the float side pulls the element further in that direction, while applying it opposite the float creates a gap that can cause adjacent content to overlap. For example, <div style="float: left; margin-right: -100%;"> pulls the next floated element directly beside it. This overlapping effect is often used to create liquid layouts.

In modern web development, float-based layouts are largely replaced by CSS Flexbox and CSS Grid, which provide more reliable and responsive layout control. Floats are now primarily used for text wrapping around images.

Customizing Templates

Here you can find a few ways to customize your HTML template:

• Add graphics or images to the template structure.
• Modify the HTML structure or replace placeholder content.
• Learn HTML with our HTML tutorial.
• Learn how to change template styles with our CSS tutorial.
• Learn how to make templates interactive with our JavaScript tutorial.

Practice