For creating a well-arranged and easy-to-understand website, creating a website layout is important. To create multi-column layouts, the following methods can be utilized:
- HTML tables
- CSS float property
- CSS framework
- CSS flexbox
- Layout using div
HTML Tables:
The easiest way of creating a layout of a website is the HTML table-based layout method. Tables utilize rows and column-based formats and are thus best for displaying tabular data. However, it is not recommended for web page layout as website modification and redesigning is a complicated task with the HTML table-based layout method.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
li{
display: inline-block;
padding: 10px;}
a{
color:white;
}
</style>
</head>
<body>
<!-- Header Section -->
<table width="100%" style="border-collapse:collapse;">
<tr>
<td colspan="2" style="background-color:crimson; text-align: center;">
<h3 style="font-size: 30px; color: white;">LAYOUT EXAMPLE</h3>
</td>
</tr>
<!-- Nav Section -->
<tr>
<td colspan="2" style="background-color:gray;">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</td>
</tr>
<!-- Main Section -->
<tr>
<td style="background-color:pink; width:50%; height: 200px; text-align: center;">
<h2>HELLO WORLD!!</h2>
</td>
<td style="background-color:white; height: 200px;text-align: center;">
<h3>How are you today?</h3>
</td>
</tr>
<!-- Footer Section -->
<tr>
<td colspan="2" style="background-color:crimson; text-align: center;">
<p style="color:white">©<strong>Copyright w3schools.com</strong></p>
</td>
</tr>
</table>
</body>
</html>
Explanation:
In the above example, we created a website layout using the HTML table-based layout method, however, it is not a recommended method.
CSS Frameworks:
CSS frameworks like W3.CSS and Bootstrap can be used to create a website layout in a fast way. It is easy to create a responsive and attractive web layout using this method.
CSS Float:
It is very easy to learn and use the CSS float property method to create an entire web layout, however, flexibility can be harmed since the floating elements are tied to the document flow.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
header {
background-color: crimson;
padding: 10px;
text-align: center;
font-size: 30px;
color: white;
}
nav {
float: left;
width: 50%;
height: 200px;
background: pink;
padding: 30px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 30px;
width: 50%;
background-color: white;
height: 200px;
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: crimson;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h3>LAYOUT EXAMPLE</h3>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<h1>HELLO WORLD!!</h1>
<p>How are you today?</p>
</article>
</section>
<footer>
<p>©<strong>Copyright w3schools.com</strong></p>
</footer>
</body>
</html>
Explanation:
In the above example, we created a website layout using the CSS Float property method.
CSS Flexbox:
A new layout mode was introduced in CSS3 to ensure that the page layout can accommodate various screen sizes along with various display devices. This layout mode was called CSS Flexbox. However, it is not suitable for IE10 and its earlier versions.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
header {
background-color: crimson;
padding: 10px;
text-align: center;
font-size: 30px;
color: white;
}
/* Container for flexboxes */
section {
display: -webkit-flex;
display: flex;
}
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: pink;
padding: 30px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: white;
padding: 30px;
}
footer {
background-color: crimson;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout */
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h3>LAYOUT EXAMPLE</h3>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<h1>HELLO WORLD!!</h1>
<p>How are you today?</p>
</article>
</section>
<footer>
<p>©<strong>Copyright w3schools.com</strong></p>
</footer>
</body>
</html>
Explanation:
In the above example, we created a website layout using the CSS Flexbox property method.
Layout using Div:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
.header{
padding: 20px;
background-color:crimson;
text-align: center;
}
.header h3{
color:white;
font-size: 20px;
}
.nav{
background-color:gray;
padding: 5px;
}
.nav li{
list-style: none;
display: inline-block;
padding: 8px;
}
.nav a{
color: white;
}
.nav ul li a:hover{
text-decoration: none;
color: blue;
}
.lside{
float: left;
width: 50%;
min-height: 200px;
background-color: pink;
text-align: center;
}
.rside
{
text-align: center;
float: right;
width: 50%;
min-height: 200px;
background-color: white;
}
.footer{
background-color:#455e64;
text-align: center;
padding: 10px;
}
.footer p{
color: white;
}
</style>
</head>
<body>
<div>
<div class="header">
<h3>LAYOUT EXAMPLE</h3>
</div>
<!-- Nav -->
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li style="float: right;"><a href="#">SIGN-IN</a></li>
<li style="float: right;"><a href="#">SIGN-UP</a></li>
</ul>
</div>
<!-- main -->
<div style="height:200px">
<div class="lside">
<h2>HELLO WORLD!!</h2>
</div>
<!-- side -->
<div class="rside">
<h3>How are you today?</h3>
</div>
</div>
<!-- footer -->
<div class="footer">
<p><strong>©Copyright w3schools.com</strong></p>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we created a website layout using the Div method.