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
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.
With this theme look: