AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Layout - three responsive columns, header and footer


Web Template » Layout - three responsive columns, header and footer

The page Layout is the graphic design part that deals with arranging the visual elements on a page. HTML layout is used to improve web pages and it establishes the general appearance, relations between the graphic elements to obtain a smooth flow of information and eye movement for maximum efficiency or impact.

How to create Layout - three responsive columns, header and footer - examples


Page template information:
Header: The part of a front end that is used at the top of the page.
Label is used to add the header section to web pages.
Navigation bar: The navigation bar is the same as the menu list. Used to display content information using hyperlink.
Left and right sidebar: Holds additional information or creatives and is not always required to be added to the page.
Content section: The content section is the main part where the content is displayed.
Bottom: The bottom section contains contact information and other queries related to web pages. The footer section always placed at the bottom of web pages. The <footer> tag is used to set the footer in web pages.

Example template with header, three columns and a base, for desktop, tablet and smartphone - mobile.

You will be able to build your site as a professional, without technical or coding knowledge! ... Choose a template created by a designer or create a website from scratch.

Example:
Example, How to create Layout - three responsive columns, header and footer - examples:
  

<!doctype html>
<html>
<head>
<style>
body {
margin: 0px;
}
a {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #006699;
text-decoration: none;
}
h1 {
font-size: 18px;
color: #255392;
}
h2, h3, h4 {
font-size: 16px;
color: #3194C4;
}
.header-top {
height: 20px;
background-color: #CCCCCC;
box-sizing: border-box;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 8px;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
width: 99%;
}
.top{
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #F8F8F8;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 4px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
font-size: 20px;
padding-top: 6px;
font-weight: bold;
}
.header{
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #FFFFCC;
color: #666666;
font-family: Verdana, Geneva, sans-serif;
margin-top: 0px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
margin-bottom: 0px;
}
.header-menu {
height: 28px;
background-color: #CCCCCC;
box-sizing: border-box;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 8px;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
width: 99%;
font-size: 20px;
font-weight: bold;
color: #333333;
}
.main {
display: flex;
min-height: calc(100vh - 40vh);
width: 99%;
margin-right: auto;
margin-left: auto;
}
.article {
flex: 1;
margin-top: 12px;
margin-left: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #333333;
background-color: #B3E7FF;
font-weight: bold;
}
.left {
order: -1;
width: 200px;
float: left;
padding: 6px;
background-color: #F2F2F2;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #333;
margin-top: 12px;
margin-left: 2px;
margin-right: 12px;
font-weight: bold;
}
.right {
width: 220px;
float: right;
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #0070DF;
box-sizing: border-box;
margin-left: 16px;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
margin-top: 12px;
font-weight: bold;
}
.right-bottom {
display: none;
}

.footer {
height: 60px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #F4F4F4;
margin-bottom: 4px;
padding-top: 8px;
text-align: center;
margin-top: 12px;
font-size: 20px;
font-weight: bold;
color: #333333;
}
.left-foot {
display: none;
}
.right-foot {
display: none;
}
@media (max-width:1100px){
.right-bottom {
display: none;
}
}
@media (max-width:920px){
.right {
display: none;
}
.left-foot {
display: none;
}
.right-foot {
display: block;
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 4px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
font-size: 12px;
padding-top: 6px;
margin-top: 18px;

}
}
@media (max-width:650px){
.left {
display: none;
}
.left-foot {
display: block;
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #F2F2F2;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 4px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
font-size: 12px;
padding-top: 6px;
margin-top: 18px;
}
.right-foot {
display: block;
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 4px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
font-size: 12px;
padding-top: 6px;
margin-top: 18px;
}
}
</style>

</head>
<body>
<div class="header-top">
header top
</div>
<div class="top">
top
</div>
<div class="header-menu">
header-menu
<!-- end #header-menu-mob --></div>
<div class="main">
<div class="left"> left </div>
<div class="article"> article </div>
<div class="right"> right </div>
</div>
<div class="left-foot"> left-foot </div>
<div class="right-foot"> right-foot </div>
<div class="footer"> footer </div>

</body>
</html>





layout design, page layout, free css html layout page design online, css html layout example, templates, tutorial, free, design, code
Layout - three responsive columns, header and footer - layouts

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.