A layout of our website is very important to make your site look better. The development of a website layout with great look and feel requires considerable time.
All modern websites use a CSS and JavaScript-based framework to create responsive and dynamic websites, but in combination with other formatting tags you can create a good layout with simple HTML tables or divisional tags.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>We created a header, two columns / boxes and a footer in this example. The columns are stacked at the top of each other on smaller screens.</p>
<p>To see the responsive effect, resize the browser window.</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Dehradun</a></li>
<li><a href="#">Ranikhet</a></li>
<li><a href="#">Almora</a></li>
</ul>
</nav>
<article>
<h1>Dehradun</h1>
<p>Dehradun is the capital of the Uttarakhand Indian state, close to the foothills of the Himalayas. The Ghanta Ghar 6-sided clock tower is at its core.</p>
<p>To the east is the Gurdwara Nanaksar Sikh temple, surrounded by adorned white and golden domes. The Mindrolling Monastery in Clement Town in the southwest of the city is a Buddhist center in Tibet.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Output:
We created a header, two columns / boxes and a footer in this example. The columns are stacked at the top of each other on smaller screens.
To see the responsive effect, resize the browser window.
Dehradun is the capital of the Uttarakhand Indian state, close to the foothills of the Himalayas. The Ghanta Ghar 6-sided clock tower is at its core.
To the east is the Gurdwara Nanaksar Sikh temple, surrounded by adorned white and golden domes. The Mindrolling Monastery in Clement Town in the southwest of the city is a Buddhist center in Tibet.
The content of websites is frequently displayed in several columns (like a magazine or journal). HTML5 offers new semantine elements that define the web page's various components:
HTML Layout
Multicolumn layouts are created five different ways. Every way has its advantages and disadvantages:
The element <table> was not designed as a layout tool. Tabular data are displayed for the purpose of the element <table>. Don't use our page layout tables then! We'll put a mess on your code. And imagine how hard it is after a couple of months to redesign our website.
Remember: Do NOT use tables for your page layout!
We can use a framework, such as Bootstrap, if we want to quickly create the layout.
It is common to use the CSS float property to make whole web layouts. You just need to remember how floating and clear properties work. Float is easy to learn.
Disadvantages: Floating elements are linked to the flow of documents, which could damage flexibility.
Flexbox has been introduced in new CSS3 layout mode.
Using flexbox, it ensures that elements are compatible with different screen sizes and display devices when the page layout must accommodate.
Drawbacks: Does not work in IE10 and earlier.
A grid-based layout system with rows and columns is provided with the CSS Grid Layout Module, making it more convenient to design webs pages without floating and positioning.
Drawbacks: Do not operate in IE or Edge 15 or earlier.