Home

Rendering a Box

Introduction

As we mentioned in their introduction, a box is an object created from an HTML element with the object having borders, a location, a size, and a background. Besides providing the styles to control those characteristics, CSS allows you to indicate how the box, as a physical object, should be drawn.

The drawing characteristic of a box or element is controlled by a style named display. Its default value is named inline, which indicates that no particular drawing effect should occur. In other words, the box or section should appear as the other styles are specified. Here are examples:

<html>
<head>
<title>Social Science: Philosophy</title>
<style>

#central        { display: inline }
#title-banner   { display: inline }
##bottom-banner { display: inline }

.main-title
{
    font-weight: bold;
    color:       Black;
    font-size:   1.26cm;
    text-align:  center;
    text-shadow: 0.14cm 0.14cm 0.12cm Silver;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }

.description
{
    font-size:  12pt;
    text-align: justify;
    font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
    float:      left;
    text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
    height:          35px;
    text-decoration: none;
    width:           90pt;
    line-height:     2.00em;
    outline:         1pt solid #99F;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
    color:            #FFCC00;
    background-color: #004080;
}
#navigator a:active  { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
    color:            #FFFF99;
    background-color: #0066CC; 
}
#navigator p
{
    width: 90pt;
    color: #FFFF99;
}
#bottom-banner
{
    background-color: #004080;
    outline:          2pt solid #FFBE00;
}
#copyright
{
    line-height: 2.00em;
    text-align:  center;
    color:       #FFCC00;
    outline:     1pt solid orange;
}

#branches { width: 160px }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover
{
    height:      35px;
    font-size:   12pt;
    line-height: 35px;
    width:       160px;
    outline:     1pt solid #CCFF33;
    text-decoration: none;
    font-family:     "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches a:link    { color: #FFFF00 }
#branches a:active  { color: #CC99FF }
#branches a:visited { color: #FFCC99 }
#branches a:hover
{
    color:   #FFCCFF;
    background-color: #0066CC;
    outline: 1pt solid #CCFF33;
}
.clearance { clear: left }

</style>
</head>
<body>

<div id="title-banner">
  <p class="main-title">Philosophy</p>
</div>

<div id="navigator">
  <p class="link-box"><a href="index1.htm">Home</a></p>
  <p class="link-box"><a href="research.htm">Research</a></p>
  <p class="link-box"><a href="resources.htm">Resources</a></p>
  <p class="link-box"><a href="aboutus.htm">About Us</a></p>
  <p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>

<div class="clearance"></div>

<div id="central">
  <p class="description">Philosophy is the study of existense (or being), 
  knowledge (or reasoning), and truth. Philosophy seeks to comprehend what 
  truth is, how to evaluate it, and how it influences thoughts and ethics. 
  Like other social science topics such as sociology or psychology, philosophy 
  examines both personal and crowd behavior but only as they relate to the 
  mind. An example is the thinking process that results in someone taking one 
  action rather than another (another person taking the same action or another 
  person taking a different action). Unlike the other social science fields, 
  philosophy doesn't concentrate on what is good or bad, or what is practical 
  or weird, or on how something should (is supposed to) be. Instead, 
  philosophy delves into the logic and the ethical reasons of what it (such 
  as something or a behavior) is.</p>
</div>

<footer id="bottom-banner">
  <div id="branches">
    <p><a href="natural.htm">Natural Philosophy</a><br>
    <a href="physical.htm">Physical Philosophy</a><br>
    <a href="moral.htm">Moral Philosophy</a></p>
  </div>

  <p id="copyright">Copyright &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

Controlling the Display of a Box or Element

A Box or Element as a List Item

If you are planning to create and display a list of items in your webpage, instead of creating an HTML list, CSS allows you to create a box or a normal section filled with objects or text items, but make each element behave like an item of a list.

To let you create a box or section filled with objects where each acts as a list item, CSS provides a value named list-item for the display style. To use it, create a normal section and apply the style with the value to each item. Here is an example:

<html>
<head>
<title>Sociology</title>
<style type="text/css">
#container, .head-portion, #bottom-side { width: 600px }
.head-portion, #key-words { text-align: center }
.main-title
{
    font-weight: 600;
    font-size:   0.86cm;
    color:       #0033CC;
}
.paragraph-title
{
    font-size: 0.62cm;
    color:     #CC3300;
}
.paragraph-title
{
    font-weight: 600;
    font-family: Times New Roman, Garamond, Georgia, serif;
}
.description
{
    text-align:  justify;
    font-family: Geneva, "Lucida Sans", Verdana, sans-serif;
}
#left-side
{
    float:  left;
    height: 330px;
    width:  140px;
}
#key-words { color: DarkBlue }

.field-of-study { display: list-item }
</style>
</head>
<body>

<header class="head-portion">
  <p class="main-title">Sociology</p>
  
  <hr color="blue">
</header>

<header class="head-portion">
   <p class="paragraph-title">Introduction</p>
</header>

<div id="container">
  <div id="left-side">
    <div class="field-of-study"><a href="behavior.htm">Behavior</a></div>
    <div class="field-of-study"><a href="community.htm">Community</a></div>
    <div class="field-of-study"><a href="society.htm">Society</a></div>
    <div class="field-of-study"><a href="family.htm">Family</a></div>
    <div class="field-of-study"><a href="stratification.htm">Stratification</a></div>
    <div class="field-of-study"><a href="dialog.htm">Dialog</a></div>
    <div class="field-of-study"><a href="relationships.htm">Relationships</a></div>
    <div class="field-of-study"><a href="religion.htm">Religion</a></div>
    <div class="field-of-study"><a href="ethnicity.htm">Ethnicity</a></div>
    <div class="field-of-study"><a href="Social.htm">Social Structures</a></div>
    <div class="field-of-study"><a href="migration.htm">Migrations</a></div>
    <div class="field-of-study"><a href="positivism.htm">Positivism</a></div>
    <div class="field-of-study"><a href="consciousness.htm">Consciousness</a></div>
    <div class="field-of-study"><a href="industrial.htm">Industrialization</a></div>
  </div>

  <p class="description">Sociology is in the social science group of academic 
  studies. Sociology is the study of human behavior, the origins of that behavior, 
  and the actual characteristics of such a behavior. Sociology analyzes the 
  person as one but also the influences of the group(s) in which the personal 
  behavior manifests itself.</p>

  <p class="paragraph-title">Sociology and its Environment</p>

  <p class="description">Sociolgy as an academic venture takes many factors in 
  consideration because various aspects shape a personality, from birth to 
  adulthood, from family to career, from opinions to affirmations. The study of 
  sociology considers the person's family, gender, ethnicity, social class, 
  religion, education, health, etc. Sociology also consider various aspects 
  of deviance, law, and societal interactivity.</p>
  
  <hr color="blue">
</div>

<header class="head-portion">
   <p class="paragraph-title">Key Words</p>
</header>

<footer id="bottom-side">
   <p id="key-words">Social Claas | Group | Sexuality | Life | Crime | Race | 
   Diversity | Clan | Poverty | Social Interations | Law | Discrimination | 
   Sociologist | Conflict | Age | Institution</p>
</footer>
</body>
</html>

This would produce:

A Box or Element as a List Item

An Object as a Block

A box is referred to as block if it behaves like a paragraph. That is, the box would start a new line and stop like the end of a paragraph. To create a block, set a value as block to the box or element's display style. Here are examples:

<html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">

#central        { display: inline }
#title-banner   { display: inline }
##bottom-banner { display: inline }

.main-title
{
    font-weight: bold;
    color:       Black;
    font-size:   1.26cm;
    text-align:  center;
    text-shadow: 0.14cm 0.14cm 0.12cm Silver;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }

.description
{
    font-size:   12pt;
    text-align:  justify;
    font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
    float:      left;
    text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
    display: block;
    height:          35px;
    text-decoration: none;
    width:           90pt;
    line-height:     2.00em;
    outline:         1pt solid #99F;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
    color:            #FFCC00;
    background-color: #004080;
}
#navigator a:active  { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
    color:            #FFFF99;
    background-color: #0066CC; 
}
#navigator p
{
    width: 90pt;
    color: #FFFF99;
}
#bottom-banner
{
    background-color: #004080;
    outline:          2pt solid #FFBE00;
}
#copyright
{
    line-height: 2.00em;
    text-align:  center;
    color:       #FFCC00;
    outline:     1pt solid orange;
}
#branches, #history, #resources { float: left }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover
{
    display: block;
    height:          26px;
    font-size:       12pt;
    line-height:     26px;
    text-decoration: none;
    font-family:     "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover
{
    width: 170px
}

#branches a:link    { color: #FFFF00 }
#branches a:active  { color: #CC99FF }
#branches a:visited { color: #FFCC99 }
#branches a:hover
{
    display: block;
    color:            #FFCCFF;
    background-color: #0066CC;
    outline:          1pt solid #CCFF33;
}
.clearance { clear: left }
</style>
</head>
<body>

<div id="title-banner">
  <p class="main-title">Philosophy</p>
</div>

<div id="navigator">
  <p class="link-box"><a href="index1.htm">Home</a></p>
  <p class="link-box"><a href="research.htm">Research</a></p>
  <p class="link-box"><a href="resources.htm">Resources</a></p>
  <p class="link-box"><a href="aboutus.htm">About Us</a></p>
  <p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>

<div class="clearance"></div>

<div id="central">
  <p class="description">Philosophy is the study of existense (or being), 
  knowledge (or reasoning), and truth. Philosophy seeks to comprehend what 
  truth is, how to evaluate it, and how it influences thoughts and ethics. 
  Like other social science topics such as sociology or psychology, philosophy 
  examines both personal and crowd behavior but only as they relate to the 
  mind. An example is the thinking process that results in someone taking one 
  action rather than another (another person taking the same action or another 
  person taking a different action). Unlike the other social science fields, 
  philosophy doesn't concentrate on what is good or bad, or what is practical 
  or weird, or on how something should (is supposed to) be. Instead, 
  philosophy delves into the logic and the ethical reasons of what it (such 
  as something or a behavior) is.</p>
</div>

<footer id="bottom-banner">
  <div id="branches">
    <p><a href="natural.htm">Natural Philosophy</a><br>
       <a href="physical.htm">Physical Philosophy</a><br>
       <a href="moral.htm">Moral Philosophy</a></p>
  </div>

<div class="clearance"></div>

  <p id="copyright">Copyright &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

An Object as a Block Element

In the same way, you can add other block-based boxes or elements. Here are examples:

<html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">

#central        { display: inline }
#title-banner   { display: inline }
##bottom-banner { display: inline }

.main-title
{
    font-weight: bold;
    color:       Black;
    font-size:   1.26cm;
    text-align:  center;
    text-shadow: 0.14cm 0.14cm 0.12cm Silver;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }

.description
{
    font-size:   12pt;
    text-align:  justify;
    font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
    float:      left;
    text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
    display:         block;
    height:          35px;
    text-decoration: none;
    width:           90pt;
    line-height:     2.00em;
    outline:         1pt solid #99F;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
    color:            #FFCC00;
    background-color: #004080;
}
#navigator a:active  { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
    color:            #FFFF99;
    background-color: #0066CC; 
}
#navigator p
{
    width: 90pt;
    color: #FFFF99;
}
#bottom-banner
{
    background-color: #004080;
    outline:          2pt solid #FFBE00;
}
#copyright
{
    line-height: 2.00em;
    text-align:  center;
    color:       #FFCC00;
    outline:     1pt solid orange;
}
#branches, #history, #resources { float: left }

#branches  a:link, #branches  a:active, #branches  a:visited, #branches  a:hover,
#history   a:link, #history   a:active, #history   a:visited, #history   a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
    display:         block;
    height:          26px;
    font-size:       12pt;
    line-height:     26px;
    text-decoration: none;
    font-family:     "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover
{
    width: 170px
}
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover
{
    width: 150pt
}
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover
{
    width: 165pt
}
#branches a:link,    #history a:link,    #resources a:link    { color: #FFFF00 }
#branches a:active,  #history a:active,  #resources a:active  { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover,   #history a:hover,   #resources a:hover
{
    display:          block;
    color:            #FFCCFF;
    background-color: #0066CC;
    outline:          1pt solid #CCFF33;
}
.clearance { clear: left }

</style>
</head>
<body>

<div id="title-banner">
  <p class="main-title">Philosophy</p>
</div>

<div id="navigator">
  <p class="link-box"><a href="index1.htm">Home</a></p>
  <p class="link-box"><a href="research.htm">Research</a></p>
  <p class="link-box"><a href="resources.htm">Resources</a></p>
  <p class="link-box"><a href="aboutus.htm">About Us</a></p>
  <p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>

<div class="clearance"></div>

<div id="central">
  <p class="description">Philosophy is the study of existense (or being), 
  knowledge (or reasoning), and truth. Philosophy seeks to comprehend what 
  truth is, how to evaluate it, and how it influences thoughts and ethics. 
  Like other social science topics such as sociology or psychology, philosophy 
  examines both personal and crowd behavior but only as they relate to the 
  mind. An example is the thinking process that results in someone taking one 
  action rather than another (another person taking the same action or another 
  person taking a different action). Unlike the other social science fields, 
  philosophy doesn't concentrate on what is good or bad, or what is practical 
  or weird, or on how something should (is supposed to) be. Instead, 
  philosophy delves into the logic and the ethical reasons of what it (such 
  as something or a behavior) is.</p>
</div>

<footer id="bottom-banner">
  <div id="branches">
    <p><a href="natural.htm">Natural Philosophy</a><br>
       <a href="physical.htm">Physical Philosophy</a><br>
       <a href="moral.htm">Moral Philosophy</a></p>
  </div>
   
  <div id="history">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities</a></p>
  </div>
   
  <div id="resources">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities/Colleges/Majors</a></p>
  </div>

  <p id="copyright">Copyright &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

An Object as a Block

 
 
 

The Inline Block of a Box

As mentioned previously, a block behaves like a paragraph that starts a new line and stops like the end of a paragraph that acts as the end of the line. If you don't want a block that starts a new line but instead continues from the previous one, create the block as inline. To support this, the display style can have a value as inline-block. Here is an example:

<html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">

#central        { display: inline }
#title-banner   { display: inline }
##bottom-banner { display: inline }

.main-title
{
    font-weight: bold;
    color:       Black;
    font-size:   1.26cm;
    text-align:  center;
    text-shadow: 0.14cm 0.14cm 0.12cm Silver;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }

.description
{
    font-size:  12pt;
    text-align: justify;
    font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
    float:      left;
    text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
    height:          35px;
    text-decoration: none;
    width:           90pt;
    display:         block;
    line-height:     2.00em;
    outline:         1pt solid #99F;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
    color:            #FFCC00;
    background-color: #004080;
}
#navigator a:active  { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
    color:            #FFFF99;
    background-color: #0066CC; 
}
#navigator p
{
    width: 90pt;
    color: #FFFF99;
}
#bottom-banner
{
    background-color: #004080;
    outline:          2pt solid #FFBE00;
}
#copyright
{
    line-height: 2.00em;
    text-align:  center;
    color:       #FFCC00;
    outline:     1pt solid orange;
}

#branches, #history, #resources { float: left }
#branches  a:link, #branches  a:active, #branches  a:visited, #branches  a:hover,
#history   a:link, #history   a:active, #history   a:visited, #history   a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
    display: inline-block;
    height:          26px;
    font-size:       12pt;
    line-height:     26px;
    text-decoration: none;
    font-family:     "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover
{
    width: 170px
}
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover
{
    width: 150pt
}
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover
{
    width: 165pt
}
#branches a:link,    #history a:link,    #resources a:link    { color: #FFFF00 }
#branches a:active,  #history a:active,  #resources a:active  { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover,   #history a:hover,   #resources a:hover
{
    display: inline-block;
    color:            #FFCCFF;
    background-color: #0066CC;
    outline:          1pt solid #CCFF33;
}
.clearance { clear: left }

</style>
</head>
<body>

<div id="title-banner">
  <p class="main-title">Philosophy</p>
</div>

<div id="navigator">
  <p class="link-box"><a href="index1.htm">Home</a></p>
  <p class="link-box"><a href="research.htm">Research</a></p>
  <p class="link-box"><a href="resources.htm">Resources</a></p>
  <p class="link-box"><a href="aboutus.htm">About Us</a></p>
  <p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>

<div class="clearance"></div>

<div id="central">
  <p class="description">Philosophy is the study of existense (or being), 
  knowledge (or reasoning), and truth. Philosophy seeks to comprehend what 
  truth is, how to evaluate it, and how it influences thoughts and ethics. 
  Like other social science topics such as sociology or psychology, philosophy 
  examines both personal and crowd behavior but only as they relate to the 
  mind. An example is the thinking process that results in someone taking one 
  action rather than another (another person taking the same action or another 
  person taking a different action). Unlike the other social science fields, 
  philosophy doesn't concentrate on what is good or bad, or what is practical 
  or weird, or on how something should (is supposed to) be. Instead, 
  philosophy delves into the logic and the ethical reasons of what it (such 
  as something or a behavior) is.</p>
</div>

<footer id="bottom-banner">
  <div id="branches">
    <p><a href="natural.htm">Natural Philosophy</a><br>
       <a href="physical.htm">Physical Philosophy</a><br>
       <a href="moral.htm">Moral Philosophy</a></p>
  </div>
   
  <div id="history">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities</a></p>
  </div>
   
  <div id="resources">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities/Colleges/Majors</a></p>
  </div>

  <p id="copyright">Copyright &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

The Inline Block of a Box

A Box or Element as a Table

The content of a box can be treated as a table. To make this possible, the display style has a few values as follows:

  • table: The box is treated like, or starts as, a table. Here is an example:
    .philosophic { display: table }
  • table-row: The box is treated as a table row. This is equivalent to the HTML tr element. Here is an example:
    .philo-heading { display: table-row }
  • table-cell. The box or element behaves like a cell of a table. That is, it can hold a value

With these values, you can create a box that resembles a table. Here is an example:

<html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
.main-title
{
    font-weight: bold;
    color:       Black;
    font-size:   1.26cm;
    text-align:  center;
    text-shadow: 0.14cm 0.14cm 0.12cm Silver;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }

.description
{
    font-size:  12pt;
    text-align: justify;
    font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
    float:      left;
    text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
	display:  inline-block;
    height:          35px;
    text-decoration: none;
    width:           90pt;
    line-height:     2.00em;
    outline:         1pt solid #99F;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
    color:            #FFCC00;
    background-color: #004080;
}
#navigator a:active  { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
    color:            #FFFF99;
    background-color: #0066CC; 
}
#navigator p
{
    width: 90pt;
    color: #FFFF99;
}

.philosophic {
    display: table;
    outline: 3pt gray groove;
}
.philo-heading { display: table-row }
.philo-field, .philo-topic, .philo-issues,
.philo-value1, .philo-value2
{
    height:      20pt;
    line-height: 20pt;
    display:     table-cell
}
.philo-field, .philo-topic, .philo-issues
{
    background-color: #333333;
    outline: 1pt solid Gray;
}
.philo-field   { width: 110pt }
.philo-topic   { width: 70pt  }
.philo-issues2 { width: 200pt }
.philo-title
{
    height:      26pt;
    line-height: 26pt;
    font-weight: bold;
    color:       white;
    font-family: "Comic Sans MS", Tahoma, sans-serif;
}
.philo-value2 { background-color: Silver;
    outline:          1pt solid #FFF;
 }

#bottom-banner
{
    background-color: #004080;
    outline:          2pt solid #FFBE00;
}
#copyright
{
    line-height: 2.00em;
    text-align:  center;
    color:       #FFCC00;
    outline:     1pt solid orange;
}

#branches, #history, #resources { float: left }
#branches  a:link, #branches  a:active, #branches  a:visited, #branches  a:hover,
#history   a:link, #history   a:active, #history   a:visited, #history   a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
    height:      26px;
    font-size:   12pt;
    line-height: 26px;
    text-decoration: none;
    display:  inline-block;
    font-family:     "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover { width: 170px }
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover { width: 150pt }
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover { width: 165pt }
#branches a:link,    #history a:link,    #resources a:link    { color: #FFFF00 }
#branches a:active,  #history a:active,  #resources a:active  { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover,   #history a:hover,   #resources a:hover
{
	color:   #FFCCFF;
	background-color: #0066CC;
	display:  inline-block;
	outline:  1pt solid #CCFF33;
}
.clearance { clear: left }

</style>
</head>
<body>

<div id="title-banner">
  <p class="main-title">Philosophy</p>
</div>

<div id="navigator">
  <p class="link-box"><a href="index1.htm">Home</a></p>
  <p class="link-box"><a href="research.htm">Research</a></p>
  <p class="link-box"><a href="resources.htm">Resources</a></p>
  <p class="link-box"><a href="aboutus.htm">About Us</a></p>
  <p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>

<div class="clearance"></div>

<div id="central">
  <p class="description">Philosophy is the study of existense (or being), 
  knowledge (or reasoning), and truth. Philosophy seeks to comprehend what 
  truth is, how to evaluate it, and how it influences thoughts and ethics. 
  Like other social science topics such as sociology or psychology, philosophy 
  examines both personal and crowd behavior but only as they relate to the 
  mind. An example is the thinking process that results in someone taking one 
  action rather than another (another person taking the same action or another 
  person taking a different action). Unlike the other social science fields, 
  philosophy doesn't concentrate on what is good or bad, or what is practical 
  or weird, or on how something should (is supposed to) be. Instead, 
  philosophy delves into the logic and the ethical reasons of what it (such 
  as something or a behavior) is.</p>
  
  <p class="description">Some of the most regular fields of study in philosophy 
  are:</p>
</div>

<div class="philosophic">
  <div class="philo-heading">
    <div class="philo-field philo-title">Philosophic Field</div>
    <div class="philo-topic philo-title">Topic</div>
    <div class="philo-issues philo-title">Issues</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value1">Epistemology</div>
    <div class="philo-value1">Knowledge</div>
    <div class="philo-value1">Truth, perception, belief, justification</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value2">Logic</div>
    <div class="philo-value2">Reason</div>
    <div class="philo-value2">Deduction (deductive reasoning)<br>
    Induction (inductive reseaning)</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value1">Metaphysics</div>
    <div class="philo-value1">Reality</div>
    <div class="philo-value1">Existence, time, causality</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value2">Aesthetics</div>
    <div class="philo-value2">Beauty</div>
    <div class="philo-value2">Art, beauty, taste</div>
  </div>
</div>

<footer id="bottom-banner">
  <div id="branches">
    <p><a href="natural.htm">Natural Philosophy</a><br>
       <a href="physical.htm">Physical Philosophy</a><br>
       <a href="moral.htm">Moral Philosophy</a></p>
  </div>
   
  <div id="history">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities</a></p>
  </div>
   
  <div id="resources">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities/Colleges/Majors</a></p>
  </div>

  <p id="copyright">Copyright &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

A Box or Element as a Table

The display style provides other values to support othe features of tables:

CSS display Values Equivalent HTML Table Tag
table table
table-header-group thead
table-column-group colgroup
table-row-group tbody
table-column col
table-row tr
table-caption caption
table-cell td
table-footer-group tfoot
   
   
 

Previous Copyright © 2015-2016, FunctionX Next