CSS Website Layout

A website is often divided into 5 area like headers, footer, left side menus, right side menus & body part .:

1) CSS Header

A header is always display on top of the website like logo or the website name .

Example:-

 .header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Test it Now

2) CSS Footer

The footer is always placed at the bottom of your page.

Example:-

 .footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Test it Now

3) CSS Navigation Bar or Menubar

It contains a list of links to help visitors navigating through 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;
} 

Test it Now

4) CSS Column or Section

It depends on the users how to containt Section area.

Example:-

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout -  */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Test it Now

4) CSS Unequal Columns

This is common with unequal column widths.

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%;
  }
}

Test it Now

Responsive Website Layout

We are creating a simple Responsive Website Layout.

Example:-

Download Source Code

Download

← prev

CSS Tutorials

CSS Properties

CSS Website Layout

1) CSS Header

2) CSS Footer

3) CSS Navigation Bar or Menubar

4) CSS Column or Section

4) CSS Unequal Columns

Responsive Website Layout

Download Source Code