HTML block layout

Instead of a tabular one, you can use block layout, which uses blocks to create a basic page template. As blocks, the HTML <div> tag, so this layout is also called "the layout of the divs". Next, using styles, these blocks are positioned on the page in a certain way, forming a template, which is then filled with various content.

The following example uses 5 <div> tags to create a page layout from two columns:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Page title</title>

    <div id="container" style="width:500px">

      <div id="header" style="background-color:#A3FFC2;padding:5px;">
        <h1 style="margin-bottom:0;">Top of the site</h1>

      <div id="menu" 
        Item 1<br>
        Item 2<br>
        Item 3

      <div id="content" 
           style="background-color: #fff;height:200px;width:400px;float:left;padding:5px;">
        Place for content

      <div id="footer"
        Copyright © 2018



The result of this example in the browser window:

Top of the site

Item 1
Item 2
Item 3
Place for content
Copyright © 2018

Note: to reduce the amount of code and ease of editing CSS styles, just for several pages made on a single template, we recommend that you take out all the CSS code in a separate file.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © | ruen