CSS Website Layout

A common website layout generally divided into header, section, navigation bar, footer. Now we will take closer look to each one of the following:-


Header Panel

A header is usually located at the top of the website (or right below a top navigation menu) and it often contains a logo or the website name.

Input:-

Index.html
	
<body>   
    <div class="header">
       <h1>Header</h1>
    </div>
</body>
Style.css
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

Output:-


Navigation Bar

A navigation bar contains a list of links to help visitors navigating through our website. We have different types of navigation bar like horizontal, vertical, fixed and sticky navbar.

Input:-

Index.html
	
<body>   
    <div class="header">
       <h1>Header</h1>
    </div>
	   <div class="horizontal-navbar">
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
    </div>
</body>
Style.css
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
.horizontal-navbar {
  overflow: hidden;
  background-color: #333;
}
.horizontal-navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.horizontal-navbar a:hover {
  background-color: #ddd;
  color: black;
}

Output:-


Section

We can divide section into different parts like 1, 2 or many column layout.  We can create a 3 column layout for desktop and change it to 1 column layout for mobile.

Input:-

Index.html
	
<body>   
    <div class="header">
       <h1>Header</h1>
    </div>
	   <div class="horizontal-navbar">
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
    </div>
<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>
</body>
Style.css
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
.horizontal-navbar {
  overflow: hidden;
  background-color: #333;
}
.horizontal-navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.horizontal-navbar a:hover {
  background-color: #ddd;
  color: black;
}
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}

Output:-

Output(Mobile view):-


Footer Panel

The footer is placed at the bottom of your page. It often contains information like copyright and contact info.

Input:-

Index.html
	
<body>   
    <div class="header">
       <h1>Header</h1>
    </div>
	   <div class="horizontal-navbar">
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
    </div>
<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>
<div class="footer">
  <p>Footer</p>
</div>
</body>
Style.css
.header, .footer {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
.horizontal-navbar {
  overflow: hidden;
  background-color: #333;
}
.horizontal-navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.horizontal-navbar a:hover {
  background-color: #ddd;
  color: black;
}
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}

Output:-

So this is the final web layout for any of the webpage as it contains all the basic elements. There are tons of different layout designs to choose from. However, the structure above, is one of the most common layout.