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. 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
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.