How Two Block Elements Are Formatted as a Stack

Q

How Two Block Elements Are Formatted as a Stack? - CSS Tutorials - Understanding Multiple Element Formatting Rules

✍: FYIcenter.com

A

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

2007-05-11, 4636👍, 0💬