CSS Website Layout

CSS layout is easy to design. We can use CSS layout to design our web page such as home page, contact us, about us etc.

Example

You can click on above box to edit the code and run again.

Output

Header

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

Example

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

Output

Header

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

.topnav {  
    overflow:  hidden;  
    background-color:  #333;  
}  
.topnav a {  
    float:  left;  
    display:  block;  
    color:  #f2f2f2;  
    text-align:  center;  
    padding:  14px 16px;  
    text-decoration:  none;  
}  
.topnav a:hover {  
    background-color:  #ccc;  
    color:  black;  
}

Output

Link Link Link

Content

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

1-column (often used for mobile browsers)
2-column(often used for tablets and laptops)
3-column layout (only used for desktops)

Example

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}

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

You can click on above box to edit the code and run again.

Output

Column

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.

Column

Footer

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

Example

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

You can click on above box to edit the code and run again.

Output

Footer