Footer: clear left : footer « Layout « HTML / CSS






Footer: clear left

 


<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  
  body {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }
  
  #header {
    background: #ccc;
    padding: 20px;
    }
    
  #content {
    float: left;
    width: 60%;
    margin-right: 6%;
    }
  
  #footer {
    clear: left;
    background: #eee;
    padding: 20px;
    }
  
  </style>
  </head>
<body>

<div id="header">
<strong>HEADER</strong>
</div>

<div id="content">
<p><strong>CONTENT</strong> 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
</p>

<p>This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. 
</p>
</div>

<div id="sidebar">
<p><strong>SIDEBAR</strong></p>
<ul>
<li><a href="#">Link Item 1</a></li>
<li><a href="#">Link Item 2</a></li>
<li><a href="#">Link Item 3</a></li>
<li><a href="#">Link Item 4</a></li>
</ul>
</div>

<div id="footer">
<strong>FOOTER</strong>
</div>
</body>
</html>

 








Related examples in the same category

1.Fixed footer
2.Mark footer with DIV
3.Set paragraph in footer
4.Set footer to left clear
5.Header, footer, side bar and content
6.3 column layout with equalising columns and footer
7.Footer layout
8.Footer with bottom offset
9.Table footer background and color
10.footer border