CSS - How Two Block Elements Are Formatted as a Stack
Interview Question Database For Software Developers
|
|
| How Two Block Elements Are Formatted as a Stack | | How Two Block Elements Are Formatted as a Stack? - CSS Tutorials - Understanding Multiple Element Formatting Rules | | By: FYIcenter.com | 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:
| | ID: 1234 | Rank: 1093 | Votes: 0 | Views: 65 | Submitted: 20070511 |
Copyright © 2009 FYIcenter.com
All rights in the contents of this Website are reserved by the individual author.
No part of the contents may be reproduced in any form without author's permission.
|
|
|
Atom feed
List view