CSS Web Layout

Web Layout

There are various ways to layout a webpage, typically divided into the following sections: Header Area, Menu Navigation Area, Content Area, Footer Area.

Header Area

The header area is located at the top of the entire webpage and is generally used to set the page title or the page logo:

CSS3 Example

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

Menu Navigation Area

The menu navigation bar contains links that guide users to other pages:

CSS3 Example

/* Navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navigation 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;
}

Content Area

The content area typically comes in three forms:

• 1 Column: Generally used for mobile devices
• 2 Columns: Generally used for tablet devices
• 3 Columns: Generally used for PC desktop devices

We will create a 3-column layout that will become a 1-column layout on smaller screens (responsive):

CSS3 Example

/* Create three equal columns */
.column {
  float: left;
  width: 33.33%;
}

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

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Tip: To set two columns, set the width to 50%. To create four columns, set the width to 25%.

Tip: For more information on @media rules, see CSS3 Media Queries.

Tip: A more advanced method is to use CSS Flexbox to create column layouts, but this is not supported in Internet Explorer 10 and earlier versions. IE6-10 can use the float method. CSS3 Flexbox.

Unequal Columns

Unequal columns typically have the content area in the middle, which is the largest and main section, with the sides serving as navigation or related content. The combined width of these three columns is 100%.

CSS3 Example

.column {
  float: left;
}

/* Side columns width */
.column.side {
  width: 25%;
}

/* Middle column width */
.column.middle {
  width: 50%;
}

/* Responsive layout - when the screen is less than 600px wide, make 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%;
  }
}

Footer Area

The footer area is at the bottom of the webpage and generally includes copyright information and contact details.

CSS3 Example

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

Responsive Web Layout

Using the above learning, we will create a responsive page where the layout adjusts based on the screen size:

CSS3 Example

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* Navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navigation bar links */
.topnav a {
  float: left;
  display: block;

color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Link color modification */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Create two columns */
/* Left column */
.leftcolumn {   
float: left;
width: 75%;
}

/* Right sidebar */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}

/* Image section */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

/* Article card effect */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}

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

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}

/* Responsive layout - when the screen size is less than 800px, the two-column layout changes to a top-bottom layout */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {   
  width: 100%;
  padding: 0;
}
}

/* Responsive layout - when the screen size is less than 400px, the navigation layout changes to a top-bottom layout */
@media screen and (max-width: 400px) {
.topnav a {
  float: none;
  width: 100%;
}
}