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

Almost all layouts are created with the 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 will have the effect of shifting even more the floated elements towards the float side, if we apply a negative margin opposite a float, it will create 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.

Customizing Templates

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

  • Add some graphics to the template.
  • Change your template or add some 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 Your Knowledge

What are the key elements in an HTML layout template?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?