CSS Website Layout
Website Layout
Headers, menus, content, and a footer are frequently separated on a website:
There are countless options for layout designs. But the structure above is among the most typical, and in this tutorial, we’ll examine it in more detail.
Header
Typically, a header appears at the top of the page (or directly behind the top navigation menu). It frequently has the name of the website or a logo:
Example
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
Result
Navigation Bar
A list of links in the navigation bar aids users in exploring your website:
Example
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Result
------TABLE MUKVU------
Content
The intended user base frequently influences how this section is laid out. One of the following layouts, or a combination of them, is the most popular:
- 1-column (often used for mobile browsers)
- 2-column (often used for tablets and laptops)
- 3-column layout (only used for desktops)
On smaller displays, we’ll use a 1-column layout, but initially we’ll design a 3-column arrangement:
Example
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Result
Advice: Adjust the width to 50% to create a layout with two columns. Use 25%, etc., to construct a 4-column layout.
Advice: Ever wonder how the @media rule operates? See our chapter on CSS Media Queries for additional information.
Advice: Use CSS Flexbox to create column layouts in a more contemporary manner. Nevertheless, Internet Explorer 10 and previous versions do not support it. For IE6–10 support, utilize floats (as seen above).
Check out our CSS Flexbox chapter to find out more about the Flexible Box Layout Module.
Unequal Columns
The largest and most significant portion of your website is its primary content.
Uneven column widths are typical in this situation, with the majority of the space devoted to the primary text. If there is any, the side content is frequently utilized to provide information pertinent to the main content or as an alternate navigation option. Vary the widths as you choose, but keep in mind that the total should equal 100%:
Example
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
Result
Footer
Your page’s footer is located at the bottom. It frequently includes details like contact information and copyright:
Example
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
Result
Responsive Website Layout
We have developed a responsive website style that switches between two columns and full-width columns based on screen width by utilizing a portion of the CSS code above:
