Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Stack of Two Block Elements

By: FYICenter.com

(Continued from previous topic...)

How Two Block Elements Are Formatted as a Stack?

If two block elements are coded next to each other, they will be formatted as a vertical stack of two boxes. The HTML and CSS document below shows you a stack of two block elements:

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 425px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#one {width: 250px; height: 150px; margin: 0px;
    background-color: #ddffdd}
  P#two {width: 200px; height: 150px; margin: 0px;
    background-color: #ddddff}
  TD.legend#w150 {height: 150px; background-color: #ffffff}
  TD.legend#g150 {height: 150px; background-color: #dddddd}
</style>
</head><body><div class="page">
<H1>Vertical Box Element Stacks</H1>
<table id=out><tr>
<td id=box><p id=one>
Welcome to FYIcenter.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to FYIcenter.com to share with others. 
</p><p id=two>
Welcome to FYIcenter.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to FYIcenter.com to share with others. 
</p></td>
<td valign=top><table cellpadding=0 cellspacing=0>
<tr><td class=legend id=w150>- block one</td></tr>
<tr><td class=legend id=g150>- block two</td></tr>
</table></td>
</tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>

Save this document as blockStack.html, and view it with a browser, you will see how blocks are stacked together:
            Block Stack

(Continued on next topic...)

  1. How Many Ways Can Elements Relate to Each Other?
  2. How In-line Elements Are Formatted Side by Side?
  3. How Nested Block Elements Are Formatted?
  4. How Two Block Elements Are Formatted as a Stack?
  5. How Floating Elements Are Formatted?
  6. Why Is the Top Margin Not Showing?
  7. How Are Vertical Margins between Two Block Elements Collapsed?
  8. How Are Parent Padding Spaces Collapsed with the Child Margins?
  9. How Is the Width of a Parent Element Related to Child Elements?
  10. How Is the Full Width of a Block Element Extended?
  11. How To Test Child Full Width Extension?
  12. How To Test Parent Content Width Extension?
  13. What Are White Spaces in HTML Documents?
  14. How White Spaces Are Formatted?
  15. What Happens to Multiple White Spaces in In-line Elements?

Selected Developer Jobs:

More...