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 ©, 2015</p> </footer> </body> </html> This would produce: 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:
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 ©, 2015</p> </footer> </body> </html> This would produce:
The display style provides other values to support othe features of tables:
|