Course: CSS Basics

Create a Layout [7/15]

A typical web page consists of the header, the main menu, the main content block, sidebars and the footer. Such blocks can be located one below the other, in columns or in a more sophisticated way. Such relative positioning of the basic web page blocks is called "page layout".

The layout can be either fixed-sized or fluid (i.e., when block width changes as the browser width changes). To be able to create a layout quickly and easily, you should gain a deep insight into the block model and positioning.

In this task, you will create a simple layout based on two columns. In the upcoming "Layouts" course you will get familiar with layout creation methods and practice in creating more complex layouts.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Create a Layout</title> </head> <body> <div class="header">Logo and Menu</div> <div class="left-column">Main Content of the Page</div> <div class="right-column">Sidebar</div> <div class="footer">Footer</div> </body> </html>
div { margin-bottom: 15px; padding: 10px 25px 10px 25px; background-color: #dff0d8; } .left-column { width: 50%; min-height: 100px; background-color: #fcf8e3; } .right-column { width: 25%; min-height: 100px; background-color: #d9edf7; } .footer { }
HTML Academy

Finalize the Page Layout:

  1. To the CSS rule for the left-column class, add property float: left;.
  2. To the CSS rule for the right-column class, add property float: right;.
  3. To the CSS rule for the footer class, add property clear: both;.

The properties we have used here are discussed in more detail in the upcoming "Layouts" course.

Theory Check Next