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>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

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

      <div id="menu" 
           style="background-color:#FFFFB8;height:200px;width:100px;float:left;padding:5px;">
        <b>Menu</b><br>
        Item 1<br>
        Item 2<br>
        Item 3
      </div>

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

      <div id="footer"
           style="background-color:#A3FFC2;clear:both;text-align:center;padding:5px;">
        Copyright © 2018 puzzleweb.ru
      </div>

    </div>

</body>
</html> 

The result of this example in the browser window:

Top of the site

Menu
Item 1
Item 2
Item 3
Place for content
Copyright © 2018 puzzleweb.ru

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 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen