Using Fixed Positioning : position fixed : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » position fixed »

 

Using Fixed Positioning


 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Using Fixed Positioning</title>
    <style type="text/css" rel="stylesheet">
{
  border-width: thin;
  border-style: solid; 
  height: 100px; 
  width: 100px;
  text-align: center}
p.red {background-color: red; position: fixed; top: 0; left: 0}
p.white {background-color: white; position: fixed; top: 0; left: 150px}
p.blue {background-color: blue; position: fixed; top: 0; left: 300px}

    </style>
  </head>
  <body>
    <p class="red">
      Container 1
    </p>
    <p class="white">
      Container 2
    </p>
    <p class="blue">
      Container 3
    </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. 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. 
  </body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» position fixed