You Are Here

CSS Website Layout

A website is often divided into headers, menus, content and a footer based on which there are many different layout designs available for the developer. Different layouts can be created by using <div> tag and use CSS property to style it.
The most common structure of website layout is as follows:
website-CSS layout

Header Section

Basically, the header section is located at the top of the website or just below a top navigation menu. It often comprises the name of the Website or the logo of the Website.

Example:

.header {

background-color: #ff5722;

padding: 10px;

text-align: center;

color: #fff;

}
Try it

Navigation Bar

A navigation bar is basically a list of links that allows the visitor to navigate through the website comfortably with easy access.

Example:

.nav-bar {

overflow: hidden;

background-color: #000;

}

.nav-bar a {

float: left;

display: block;

color: #fff;

text-align: center;

padding: 12px 14px;

text-decoration: none;

}

.nav-bar a:hover {

background-color: #ff5722;

}

@media screen and (max-width: 400px) {

.nav-bar a {

float: none;

width: 100%;

}

}
Try it

Content Section

The content section is the main part of the website. The user can divide the content section in the n-column layout.
  • 1-Column Layout: The layout contains only one column, It is mostly used for mobile layout.
  • 2-Column Layout: The layout contains two columns, it is mostly used for tablets or laptops.
  • 3-Column Layout: The layout contains three columns, it is mostly used for desktop.

Example:

.column {

float: left;

width: 33.33%;

padding: 20px;

}

.row:after {

content: "";

display: table;

clear: both;

}

@media screen and (max-width:768px) {

.column {

width: 50%;

}

}

@media screen and (max-width:576px) {

.column {

width: 100%;

}

}
Try it

Unequal Columns

Example:

.column {

float: left;

padding: 20px;

}

.column.corner {

width: 25%;

}

.column.middle {

width: 50%;

}

.row:after {

content: "";

display: table;

clear: both;

}

@media screen and (max-width:576px) {

.column.corner, .column.middle {

width: 100%;

}

}
Try it

Footer Section

A footer section is present at the bottom of the webpage and it generally consists of information like contact info, copyrights, About us, etc.

Example:

.footer {

background-color: #ff5722;

padding: 8px;

text-align: center;

}
Try it

Ask a Question

Your email address will not be published. Required fields are marked *