Creating layouts is the most important thing while designing a website, as it will ensure that your website looks well-arranged and the content appears easy to understand. There are various techniques and frameworks available for creating layouts, but here we will learn about simple techniques. You can use the following methods to create multicolumn layouts:
- HTML tables (Not recommended for layout)
- CSS float property (outdated for layout, only use for wrapping text around images)
- CSS frameworks (Bootstrap, Tailwind CSS, and so on)
- CSS flexbox
- CSS Grid (modern standard)
- Layout using div or semantic elements
HTML Tables (Not Recommended)
Using HTML tables to create a layout is a straightforward method that relies on rows and columns. However, it is advised against utilizing HTML tables for page layout purposes.
The <table> element is primarily used for presenting data in a tabular format and is not suitable for designing layouts. While it is straightforward to create a basic layout using tables, making changes or redesigning your website later on can become quite challenging.
Here is a demonstration of how to create a basic webpage structure using an HTML table.
Example
<!DOCTYPE html>
<html>
<head>
<style>
li{
display: inline-block;
padding: 10px;}
a{
color:#20b2aa;
}
</style>
</head>
<body>
<!-- Header Section -->
<table width="100%" style="border-collapse:collapse;">
<tr>
<td colspan="2" style="background-color:#1a1a1a; text-align: center;">
<h3 style="font-size: 30px; color: #ff6a6a;">C# Tutorial Table-layout</h3>
</td>
</tr>
<!-- Nav Section -->
<tr>
<td colspan="2" style="background-color:#666666;">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</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:#e6e6fa; width:80%; height: 400px; text-align: center;">
<p>Write your content Here</p>
</td>
<td style="background-color:#a7e6fb; height: 400px;">
<p>This is your side bar</p>
</td>
</tr>
<!-- Footer Section -->
<tr>
<td colspan="2" style="background-color:#2e2e2e; text-align: center;">
<p style="color:#f08080">©<strong>Copyright logic-practice.com</strong></p>
</td>
</tr>
</table>
</body>
</html>
Note: This example is only to show the layout with a table. Do not rely on tables to do page layout because it is only supposed to be applied to tabular data. Layouts should instead use Flexbox or Grid.
CSS Frameworks
CSS embraces modern frameworks like Bootstrap 5 and Tailwind CSS to swiftly produce layouts. By leveraging these frameworks with minimal custom CSS, developers can easily craft responsive and captivating designs.
CSS Float
A complete web layout can be crafted by leveraging the CSS float attribute.
Benefit: Highly user-friendly and straightforward, especially designed for enclosing text or images.
Drawback: Not ideal for modern layouts. Floating elements disrupt the flow of the document and offer less flexibility compared to Flexbox or Grid layouts.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: #000080;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Tutorials Gallery</h1>
</header>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<article>
<h1>HTML</h1>
<p> HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is developed for beginners and professionals. </p>
<p> HTML is an acronym that stands for Hyper Text Markup Language. Let's see what Hyper Text is and what Markup Language is. </p>
</article>
<footer> Copyright © logic-practice.com </footer>
</div>
</body>
</html>
Note: At present, float layouts are regarded as old-fashioned. Page structures should use Flexbox or Grid.
CSS Flexbox
Flexbox is a modern CSS3 layout mode.
Benefit: It streamlines the process of adapting layouts to different screen dimensions and devices.
Drawback: CSS Grid might be more suitable for handling tasks involving grid-like structures spanning multiple rows.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
text-align: center;
}
.flex-container > * {
padding: 15px;
flex: 1 100%;
}
.article {
text-align: left;
}
header { background: #000080; color: white; }
footer { background: #000080; color: white; }
.nav { background: #eee; }
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
}
@media (min-width: 768px) {
.nav { flex: 1; order: 1; text-align: left; }
.article { flex: 5; order: 2; }
footer { order: 3; }
}
</style>
</head>
<body>
<div class="flex-container">
<header><h1>City Gallery</h1></header>
<nav class="nav">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<article class="article">
<h1>HTML</h1>
<p> HTML tutorial for beginners and professionals. </p>
<p><strong> Resize this page to see what happens! </strong></p>
</article>
<footer> Copyright © logic-practice.com </footer>
</div>
</body>
</html>
Layout using div
Example
<!DOCTYPE html>
<html>
<head>
<title>Webpage Layout</title>
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #455e64; text-align: center; padding: 10px; color: white; }
nav { background: #243238; }
nav ul { margin: 0; padding: 0; display: flex; list-style: none; }
nav li { margin: 0; }
nav a { color: white; padding: 10px 15px; display: block; text-decoration: none; }
nav a:hover { color: #7fffd4; }
main { display: flex; min-height: 440px; }
article { flex: 4; background: #f0f8ff; text-align: center; }
aside { flex: 1; background: #c1cdcd; text-align: center; }
footer { background: #455e64; text-align: center; padding: 10px; color: #8fbc8f; }
</style>
</head>
<body>
<header><h2>C# Tutorial Modern Layout</h2></header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li style="margin-left:auto"><a href="#">LOGIN</a></li>
<li><a href="#">SIGN-UP</a></li>
</ul>
</nav>
<main>
<article><p>Write your content here</p></article>
<aside><p>This is side</p></aside>
</main>
<footer>© <strong>Copyright logic-practice.com</strong></footer>
</body>
</html>
CSS Grid
CSS Grid represents the latest multidimensional grid system in CSS, designed specifically for creating complex and adaptable layouts on web pages.
Conclusion
In modern web design, Flexbox is utilized for creating basic web layouts in rows and columns, while CSS Grid is preferred for constructing entire-page layouts consisting of rows and columns. Web frameworks like Bootstrap and Tailwind CSS are valuable for simplifying the development of responsive websites, and employing semantic HTML elements enhances the clarity and readability of your site. Outdated methods like tables or floats are discouraged, except for specific and specialized scenarios.