Simple Web Page Layout - HTML & CSS

Page layout using CSS

The simple web page example, shown below, uses CSS for its layout. The page is dived into the following 5 sections - header section, navigation section, main content section, right side section, and footer section. Each individual section is enclosed within a separate <div> element. All 5 sections are also enclosed within a single <div> element that is used as a container for the page. The styles, which are applied to the container <div>, set the width of the page and also center it horizontally. Centering is accomplished by setting both the margin-left and margin-right properties to auto. The navigation, main content, and right side sections are positioned in a side-by-side configuration by setting the float property. The clear property is used to position the footer section below the other floated sections.

Video Tutorial - Step by Step Creation Process

Simple Web Page Layout

Simple Web Page Example

The HTML & CSS Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  
<head>
<title>HTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  * {padding:0; margin:0;}
  a {text-decoration:none;}
  p {padding-left:10px;}
  .container {width:700px; margin-left:auto; margin-right:auto;}
  .header {background-color:#441111}
  .header h1 {color:white; line-height:80px;}
  .header img {float:left; height:70px; width:100px; padding:5px; margin-right:20px}
  .nav {background-color:#ffdd99; width:150px; float:left;}
  .nav ul {margin:15px; list-style-type:none;}
  .content {float:left; width:400px;}
  .right {background-color:#bb9955; float:left; width:150px;}
  .footer {clear:left; background-color:#bb9955;}
</style>
</head>

<body>
 <div class="container">
  <div class="header">
   <img src="eightball.gif" alt="eight ball" />
   <h1>Website Name</h1>
  </div>

  <div class="nav">
   <p><strong>Navigation</strong></p>
   <ul>
    <li><a href="one.html">One</a></li>
    <li><a href="two.html">Two</a></li>
    <li><a href="three.html">Three</a></li>
   </ul>
  </div>

  <div class="content">
   <p><strong>Main Content</strong></p>
   <p>line of text</p>
   <p>line of text</p>
   <p>line of text</p>
   <p>line of text</p>
   <p>line of text</p>
   <p>line of text</p>
   <p>line of text</p>
  </div>

  <div class="right">
   <p><strong>Right Side</strong></p>
   <p><strong>Right Side</strong></p>
   <p><strong>Right Side</strong></p>
  </div>

  <div class="footer">
   <p>Footer</p>
  </div>

 </div>
</body>
</html>