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

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.