The Left Distance of a Box

The location of a box is a set of two measures: The top and the left. The left distance of a box or element is the distance from the left border of the parent to the left border of the box or element:

The left distance is supported by a style named left. It can be expressed as:

• auto: The browser will decide, based on the order the box or element was added inside its parent object or element, how much distance to apply from both left borders
• Number: The box is positioned on the right side of its parent based on the HTML-based number of this style, regardless of the order in which the box or element was added to its parent. Here is an example:

  #bottom-part   {
      left: 0pt;
      width:             100%;
      height:            5.5em;
      background-color:  Black; }

• Percentage: The value is a ratio relative to the available distance between the left border of the box and the left border of its parent

The Right Distance of a Box

The right distance is the measure from the right border of the parent of the box to the right border of the box or element. It can be illustrated as follows:

The right distance is represented by a style named right. The value can be set as follows:

• auto: This is the default value and it means that you let the browser decide. If you set the width to a value other than auto, you should (practically must) set the right value to auto
• Number: The value must be an HTML-based number. Here is an example:

  #bottom-part   {
      right: 0.00em;
      left:              0;
      width:             100%;
      height:            5.5em;
      background-color:  Black; }

  If you set this value (as a constant or fixed number), you should set the width value to auto
• Percentage: The value must be a relative one based on the available distance from both borders

The Top Distance of a Box

The top measure is the distance from the top border of the parent of an object to the top border of the object or element. This can be illustrated as follows:

Of course, both objects can be boxes. The top border is represented by a style named top. It is expressed as:

• auto: The parent element will decide how much space to use for the top distance. In most cases, the browser will let the objects be positioned, from top to bottom inside the parent object, in the objects the objects were added in the HTML code. Here are examples:

  #bottom-part   {
      top: auto;
      left:             0;
      width:            100%;
      height:           5.5em;
      background-color: Black; }

• Number: The value is in a decimal number that is HTML-based. Regardless of the order in which elements are created in the HTML code, the browser will position the object by this distance from the top border of the parent to the top border of the child. Here are examples:

  #head-portion {
      top:         0;
      left:        0;
      right:       auto;
      height:      4.60em;
      width:       100%;
      text-align:  center;
      background-color: LightBlue; }
  
  #central {
      top:         4.65em;
      left:        8.90em;
      height:      auto;
      width:       auto;
      right:       1.20em; }
  
  #studies {
      left:        0;
      top:         4.65em;
      width:       8.50em;
      height:      auto;
      background-color: #AF320F; }

• Percentage: The value is given as a percentage of the available distance from the the top borders of the parent and the child object or element

The Bottom Distance of a Box

The bottom distance is the distance from the bottom border of the parent of a box, object, or element to the bottom border of the box, object, or element. It can be illustrated as follows:

To support the bottom distance, CSS provides a style named bottom. Its value can be set as:

• auto: This is the default value. It means that you want the browser to manage the bottom distance. Normally, if you set the height style to a known number, you should set the bottom style to auto
• Number: You can set the bottom style to a constant number. If you do, you should then set the height style to auto. Here are examples:

  #central {
      top:         4.65em;
      left:        8.90em;
      height:      auto;
      width:       auto;
      right:       1.20em;
      bottom:      5.5em; }
  
  #studies {
      left:        0;
      top:         4.65em;
      width:       8.50em;
      height:      auto;
      bottom:      5.5em;
      background-color: #AF320F; }
  
  #bottom-part   {
      top:         auto;
      left:        0;
      width:       100%;
      right:       0;
      height:      5.5em;
      bottom:      0;
      background-color: Black; }

• Percentage: You can set the bottom style to a relative value that depends on the distanc available from both bottom borders

The Position of a Box

The styles we have just reviewed for the location of an object only indicate how the browser should interpret them, not how a box should be positioned. When specifying the location of a box, you may want the distance (from left or top) to be based on the direct parent of the box or on the root, the body element that is the ultimate parent of all elements.

To let you control the positioning relationship between a box or an element and its webpage, CSS provides a style named position. Its values can be:

• static: This is the default value. If you set it, the browser will not care about the values set for the location of the box
• relative: The browser will position the boxes and elements in the order they are added to the HTML code of the webpage. Here are examples:

  <html>
  <head>
  <title>Social Science Studies</title>
  
  <style>
  #whole {
      background-color:  AntiqueWhite; }
  
  #head-portion {
      position:    relative;
      top:         0;
      left:        0;
      right:       0;
      height:      2.60em;
      width:       auto;
      text-align:  center;
      background-color: Brown; }
  
  .main-title {
      text-align:  center;
      font-weight: bold;
      color:       Yellow;
      font-size:   0.86cm;
      text-shadow: 0.10cm 0.10cm 0.02cm Black;
      font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }
  
  #central {
      position:    relative;
      top:         0.05em;
      left:        0;
      height:      auto;
      width:       auto;
      right:       0;
      bottom:      5.5em; }
  
  #bottom-part {
      position:    relative;
      top:         auto;
      left:        0;
      width:       auto;
      right:       0;
      height:      4.5em;
      bottom:      0;
      background-color:  Maroon; }
  
  .introduction {
      text-align:  justify;
      word-break:  keep-all;
      color:       Black;
      font-family: Georgia, Garamond, Times New Roman, serif; }
  
  .sub-title {
      text-align:  left;
      color:       Chocolate;
      font-size:   0.64cm;
      font-family: Georgia, Times New Roman, serif; }
  
  .references {
      color:       #FFF;
      font-weight: bold;
      text-align:  center; }
  </style>
  </head>
  <body id="whole">
  
  <header id="head-portion">
    <p class="main-title">Social Science Studies</p>
  </header>
  
  <div id="central">
    <p class="sub-title">Introduction</p>
  
    <p class="introduction">Social sciences cover a wide range of studies that 
    address all types of topics about human beings, their behaviors, their 
    history, their societies, and their environments. Regular social science 
    areas include sociology, psychology, philosoply, linguistics, communication, 
    history, geography, demography, ethnicity, anthropology, archaeology, 
    political science, law, education, criminology, and economy, just to name 
    a few. Some social science topics are grouped in categories, such as 
    individual or crowd, where studies tend to address the same categorical 
    isssues. Still, social sciences are highly interchangeable. Sometimes, 
    differences are a matter of interpretations based on the particular area(s) 
    being considered.</p>
  </div>
  
  <footer id="bottom-part">
    <p class="references">Schools | Majors | Minors</p>
    <p class="references">Copyright &copy; 2015</p>
  </footer>
  
  </body>
  </html>

  This would produce:

  

• absolute: Regardless of the order in which the elements or boxes are created in the code of the webpage, the absolute value positions the box or element based on the area made available by the parent element. Remember that if an element is directly nested in the body element, the body is the parent. In an element A is nested in another element or box B, the element or box B is the parent of element A. So the nested element can only positioned inside the nesting element. Here are examples:

  <html>
  <head>
  <title>Social Science: Religious Studies</title>
  
  <style>
  #head-portion {
      position:    absolute;
      top:         0;
      left:        0;
      right:       auto;
      height:      4.60em;
      width:       100%;
      text-align:  center;
      background-color: LightBlue; }
  
  #central {
      height:      auto;
      width:       auto;
      bottom:      5.5em;
      top:         4.65em;
      left:        8.90em;
      right:       1.20em;
      position:    absolute; }
  
  #left-side {
      left:        0;
      top:         4.65em;
      width:       8.50em;
      height:      auto;
      bottom:      5.5em;
      position:    absolute;
      background-color: #AF320F; }
  
  #main-title         {
      line-height: 10pt;
      font-weight: bold;
      color:       Navy;
      font-size:   0.86cm;
      text-align:  center;
      text-shadow: 0.06cm 0.06cm 0.6cm Blue;
      font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }
  
  #religions {
      top:         0.00em;
      width:       128px;
      left:        -2.20em;
      color:       Yellow;
      position:    absolute;
      list-style-type: none;
      font-family: Comic Sans MS, Helvetica, Arial, sans-serif; }
  
  #relig-title {
      top: -1.00em;
      width:  135px;
      height: 1.80em;
      left:        2.25em;
      background-color: #FF3300;
      position:    absolute;
  }
  #studies {
      position:    absolute;
      left:        0;
      top:         4.65em;
      width:       8.50em;
      height:      auto;
      bottom:      5.5em;
      background-color: #AF320F; }
  
  #topics {
      left: 0;
      position:    absolute;
      left:        1em;
      color:       Yellow;
      font-size:   10pt;
      list-style-type: none; }
  
  #bottom-part   {
      position:    absolute;
      top:         auto;
      left:        0;
      width:       100%;
      right:       0;
      height:      5.5em;
      bottom:      0;
      background-color: Black; }
  
  .contribution {
      color:       Black;
      text-align:  justify;
      word-break:  keep-all;
      font-family: Georgia, Garamond, Times New Roman, serif; }
  
  .references {
      color:       #FFF;
      font-weight: bold;
      text-align:  center; }
  
  a.religion:link,     a.religion:active,
  a.religion:visited,  a.religion:hover,
  a.reference:link,    a.reference:active,
  a.reference:visited, a.reference:hover
  {
      font-weight:     500;
      font-size:       10pt;
      text-decoration: none;
  }
  
  a.religion:link,    a.reference:link    { color: #FFFF00 }
  a.religion:active,  a.reference:active  { color: #66CCFF }
  a.religion:visited, a.reference:visited { color: #FF9933 }
  a.religion:hover
  {
      color:            #FFFFFF;
      background-color: #FF9900;
  }
  a.reference:hover
  {
      color:            #99FFCC;
      background-color: #999999;
      outline:          White solid 1pt;
  }
  </style>
  </head>
  <body>
  
  <header id="head-portion">
    <p id="main-title">Social Science: Religious Studies</p>
  </header>
  
  <div id="central">
    <p class="contribution">A religion is a system in which an organization, as a 
    group of people, has a set of beliefs with the goal to worship. The beliefs 
    are mutual so that all or most people in the group share the same concept on 
    the object of worship, the concept of worship (or how the worship should be 
    conducted), and the end goal of the religion. A religion is created. As a 
    result, the beliefs, the worship, and the end goal of the religion must be 
    defined by the person who, and the entity that, creates or initiates the 
    religion.</p>
  
    <p class="contribution">A religion is created, either by a person or a group 
    of people. As a religion becomes known, new people join it. Both existing and 
    new people bring new ideas. Different views are added or removed and its 
    directions may be adjusted or changed. If new and old tendencies become 
    difficult or impossible to reconcile or to consolidate, new branches may be 
    created. As a result, there are now many religions.</p>
  </div>
  
  <div id="studies">
    <ul id="religions">
      <li id="relig-title">Religions</li>
      <li>&nbsp;</li>
      <li><a class="religion" href="judaism.htm">Judaism</a></li>
      <li><a class="religion" href="christianity.htm">Christianity</a></li>
      <li><a class="religion" href="catholicism.htm">Catholicism</a></li>
      <li><a class="religion" href="islam.htm">Islam</a></li>
      <li><a class="religion" href="buddhism.htm">Buddhism</a></li>
      <li><a class="religion" href="mormonism.htm">Mormonism</a></li>
      <li><a class="religion" href="hinduism.htm">Hinduism</a></li>
      <li><a class="religion" href="confucianism.htm">Confucianism</a></li>
      <li><a class="religion" href="bahai.htm.htm">Bah&aacute;&#039;&iacute; 
      Faith</a></li>
      <li><a class="religion" href="atheism.htm.htm">Atheism</a></li>
    </ul>
  </div>
  
  <footer id="bottom-part">
    <p class="references">
      <a href="denominations.htm" class="reference">Christian Denominations</a> | 
      <a href="eastern.htm" class="reference">Eastern Christianity</a> | 
      <a href="gnosticism.htm" class="reference">Gnosticism</a></p>
    <p class="references">Copyright &copy; 2015</p>
  </footer>
  
  </body>
  </html>

  This would produce:

  

• fixed: This value is mostly made for graphic intensive or smart devices so that the box or element would remain in its fixed position even if the user pans the page