Floating elements and element boxes : Box model Basics : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » Box model Basics »

Floating elements and element boxes


 

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Flowing Text Around Floating Elements</title>

      <style type = "text/css">

         div { background-color: #ffccff;
               margin-bottom: .5em;
               font-size: 1.5em;
               width: 50% 
         }

         p { 
               text-align: justify; 
         }

      </style>

   </head>

   <body>

      <div style = "text-align: center">
         this is a test. </div>

      <div style = "float: right; margin: .5em; 
         text-align: right">
         this is a test. this is a test. </div>

      <p>this is a test. this is a test. </p>

      <div style = "float: right; padding: .5em; 
         text-align: right">
         this is a test. this is a test. this is a test. this is a test. </div>

      <p>this is a test. this is a test. <span style = "clear: right">
      this is a test. this is a test. this is a test. </span></p>

   </body>
</html>