Page Layouts Using CSS

The most common way to lay out a page is by establishing a grid, which is generally made up of two or more columns. The float property is the standard method for creating a grid structure of columns in most modern web designs. This is done by taking block level elements that would normally stack vertically and horizontally and floating them next to each other.

images/articles/css/css01.webp

CSS can be used to create complex appearances for web pages. For example, you can create columns where there is a menu on the left or right side and content in the other column. HTML page layout is a collection of invisible nested boxes.

All of the content of a web page is enclosed by an opening <body> tag and closing </body> tag. This means that the body is the biggest box, the box that contains everything else.

At the minimum level, the boxes that represent major sections of the page - Header, Navigation Menu, Main Section (Content and Sidebar), and Footer.

 

Header

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

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

Navigation Bar

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

/* The navbar container */
.navbar {
 overflow: hidden;
 background-color: #333;
}

/* Navbar links */
.navbar a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

/* Links - change color on hover */
.navbar a:hover {
 background-color: #ddd;
 color: black;
}

Content

The layout depends on the target users. The most common layout is:

  • 1 column (used for mobile browsers)
  • 2 column (used for tablets and laptops)
  • 3 column layout (used for desktops)

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

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

To create a 2-column layout, change the width to 50%.

Footer

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

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