Loading Please Wait...
When we are thinking to design web pages or websites, we have some common designs such as header, main content, side content, footer, etc. These designs are arrange in some common layout in form of row and column. See below image:
To define various section of a web page, HTML provides different semantic elements.
See below image, how elements are used for layout:
There are various layout method you can use to layout.
CSS float layout is very easy to learn. We just need to take care of float and clear. In the float layout, elements are tied up with the document flow, hence may harm the flexibility of the document.
<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
header{
background: #ecf1f9;
color: #1a1e49;
padding: 1rem;
}
footer{
background: #9b87bc;
color: #ecf1f9;
padding: 1rem;
}
aside{
float: left;
background: #fc8d2a;
color: #ecf1f9;
padding: 1rem;
width: 30%;
height: 200px;
}
main{
float: left;
background: #ff5071;
color: #ecf1f9;
padding: 1rem;
width: 70%;
height: 200px;
}
section::after{
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<main>
<div>Main Content</div>
</main>
</section>
<footer>Footer</footer>
</body>
</html>
CSS flex layout ensure the flexibility of the document and layout according to the different device and size.
<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
header{
background: #ecf1f9;
color: #1a1e49;
padding: 1rem;
}
footer{
background: #9b87bc;
color: #ecf1f9;
padding: 1rem;
}
section{
display: flex;
}
aside{
flex: 1;
background: #fc8d2a;
color: #ecf1f9;
padding: 1rem;
height: 200px;
}
main{
flex: 3;
background: #ff5071;
color: #ecf1f9;
padding: 1rem;
height: 200px;
}
</style>
</head>
<body>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<main>
<div>Main Content</div>
</main>
</section>
<footer>Footer</footer>
</body>
</html>
CSS grid layout is based on grid system of rows and columns
<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
header{
background: #ecf1f9;
color: #1a1e49;
padding: 1rem;
}
footer{
background: #9b87bc;
color: #ecf1f9;
padding: 1rem;
}
section{
display: grid;
grid-template-columns: 1fr 3fr;
}
aside{
background: #fc8d2a;
color: #ecf1f9;
padding: 1rem;
height: 200px;
}
main{
background: #ff5071;
color: #ecf1f9;
padding: 1rem;
height: 200px;
}
</style>
</head>
<body>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<main>
<div>Main Content</div>
</main>
</section>
<footer>Footer</footer>
</body>
</html>
You can use CSS Frameworks to design web pages and websites. Some of the popular frameworks are:
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved