Setting box dimensions and aligning text : Box model Basics : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » Box model Basics »

Setting box dimensions and aligning text


 

<?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>Box Dimensions</title>
 
      <style type = "text/css">

         div { background-color: #ccc;
               margin-bottom: .5em 
         }
      </style>

   </head>

   <body>

      <div style = "width: 20%">this is a test. this is a test. this is a test. </div>

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

      <div style = "width: 20%; height: 30%; overflow: scroll">
      this is a test. this is a test. this is a test. </div>

   </body>
</html>