HTML Multi-Column Page Construction

The division element, <div> can be used to group both block level and text level elements as a division or section in a HTML page. The usage of <div> element is much flexible then <p> element. The <div> element can group elements across the HTML page as the <p> element. The <div> element can also group elements into a block which can be placed anywhere on the HTML page.

There is also another deprecated center element, <center>, has similar property as the <div> element. The only difference between them are the text align of the text contents for the center element are always set to center aligned.

Similarly, the text contents can further be rendered into a more readable format by using the attributes of element tags, for examples text alignment, underline etc.

Code Sample:

<body>
<div style="z-index:-1"><h1>Heading 1 of HTML Page</h1>
<p>Paragraph 1 of <span style="font-size:xx-large">
<b>HTML</b></span> page under h1 <br>next line</p>
<p>Paragraph 2 of <span style="font-size:32px">
<b>HTML</b></span> page under h1</p></div>
<div style="width: 250px; margin: auto; z-index:-1;">
<h2>Heading 2 of HTML Page</h2>
<p>Paragraph 3 of <span style="font-size:x-large">
<b>HTML</b></span> page under h2 <br>next line</p>
<p>Paragraph 4 of <span style="font-size:24px">
<b>HTML</b></span> page under h2</p></div>
<div style="float:left;width: 250px; z-index:-1;">
<h3>Heading 3 of HTML Page</h3>
<p>Paragraph 5 of <span style="font-size:large">
<b>HTML</b></span> page under h3 <br>next line</p>
<p>Paragraph 6 of <span style="font-size:18px">
<b>HTML</b></span> page under h3</p></div>
<div style="float:right;width:150px; z-index:-1;">
<h4>Heading 4 of HTML Page</h4>
<p>Paragraph 7 of <span style="font-size:medium">
<b>HTML</b></span> page under h4 <br>next line</p>
<p>Paragraph 8 of <span style="font-size:16px">
<b>HTML</b></span> page under h4</p>
<p style="font-size:16px">Paragraph 9 of
<b>HTML</b> page under h4</p></div>
<div style="clear:both;position:relative;top:-186px; left:104px;
width:200px;height:250px;background-color:aqua;">
<h5>Heading 5 of HTML Page</h5>
<p style="font-size:small">Paragraph 10 of
<b>HTML</b> page under h5 <br>next line</p>
<p style="font-size:13px">Paragraph 11 of
<b>HTML</b> page under h5</p></div>
<div style="position:relative;top:-250px;height:100px">
<h6>Heading 6 of HTML Page</h6>
<p style="font-size:11px">Paragraph 12 of
<b>HTML</b> page under h6</p>
<p style="font-size:x-small">Paragraph 13 of
<b>HTML</b> page under h6 <br>next line</p>
<p style="font-size:10px">Paragraph 14 of
<b>HTML</b> page under h6</p></div>
<div style="position:relative;top:-200px;">A block quotation of ..........
.......... .......... .......... .......... .......... .......... ..........
.......... .......... .......... .......... .......... .......... .......... from reference:
<blockquote>Block quotation from
.......... .......... .......... .......... .......... .......... ..........
.......... .......... .......... .......... .......... .......... ..........
other resources ...</blockquote> End of quotation</div>
<hr>
<center>Author <br>contact: <address>sideway.hk</address>
Date 2010</center>
</body>

Page Sample:

Heading 1 of HTML Page

Paragraph 1 of HTML page under h1
next line

Paragraph 2 of HTML page under h1

Heading 2 of HTML Page

Paragraph 3 of HTML page under h2
next line

Paragraph 4 of HTML page under h2

Heading 3 of HTML Page

Paragraph 5 of HTML page under h3
next line

Paragraph 6 of HTML page under h3

Heading 4 of HTML Page

Paragraph 7 of HTML page under h4
next line

Paragraph 8 of HTML page under h4

Paragraph 9 of HTML page under h4

Heading 5 of HTML Page

Paragraph 10 of HTML page under h5
next line

Paragraph 11 of HTML page under h5

Heading 6 of HTML Page

Paragraph 12 of HTML page under h6

Paragraph 13 of HTML page under h6
next line

Paragraph 14 of HTML page under h6

A block quotation of .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... from reference:

Block quotation from .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... other resources ...

End of quotation

Author
contact:

sideway.hk

Date: 2010

required Optional tag Deprecated Transitional Frameset Exclusion
Optional Element or Content Occurrence Character:
(+) one or more; (*) zero or more; (?) zero or one times; ( ) exactly once
Choice or Sequence Element or Content :
(|) or (&) and (,) sequence (+) include (-) exclude

SEP 2010

S	M	T	W	T	F	S

			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

JUL 2015

S	M	T	W	T	F	S

			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Sideway BICK Blog

01/09