Multicolumn Layout

Multicolumn text formatting is one of the most common features of desktop publishing. In addition to creating attractive pages in a variety of formats, multiple columns let you present your text using shorter, easier-to-read lines. HTML page designers have longed for the ability to easily create multiple text columns in a single page, but they have been forced to use various tricks,
Netscape 4 neatly solved this problem with the unique <multicol> tag. While fancy unbalanced columns and straddling are not possible with this tag, as they are with tables, conventionally balanced text columns are easy to create with <multicol>. And while this capability is available only with Netscape 4, the <multicol> tag degrades nicely in other browsers.

H.2.1. The <multicol> Tag (Antiquated)

The <multicol> tag creates multiple columns of text and lets you control the size and number of columns.

<multicol> (Antiquated)

Function
Formats text with multiple columns
Attributes
class, cols, gutter, style, width
End tag
</multicol>; never omitted
Contains
body_content
Used in
block

The <multicol> tag can contain any other HTML content, much like the <div> tag. All of the content within the <multicol> tag is displayed just like conventional content, except that Netscape 4 places the contents into multiple columns rather than just one.
The <multicol> tag creates a break in the text flow and inserts a blank line before rendering its content into multiple columns. After the tag, another blank line is added and the text flow resumes using the previous layout and formatting.
Netscape 4 automatically balances the columns, making each approximately the same length. Where possible, the browser moves text between columns to accomplish the balancing. In some cases, the columns cannot be balanced perfectly because of embedded images, tables, or other large elements.
You can nest <multicol> tags, embedding one set of columns within another set of columns. While infinite nesting is supported, more than two levels of nesting are generally impractical and results in unattractive text flows.
Related Posts:
  • id and class attributes The id attribute is used to identify elements and mark up specific functional areas of a website, and the class attribute is used to classify one or more elements. These important attributes help you target elements when it … Read More
  • Multicolumn Layout Multicolumn text formatting is one of the most common features of desktop publishing. In addition to creating attractive pages in a variety of formats, multiple columns let you present your text using shorter, easier-to-… Read More
  • six HTML heading tags heading ::= h1_tag | h2_tag | h3_tag | h4_tag | h5_tag … Read More
  • XHTML vs. HTML The question of whether to use XHTML or HTML will often not even come up in an averageweb project; most web designers these days will naturally gravitate toward XHTML, asit is perceived as being new, advanced, and the “X” ma… Read More
  • Table basics in HTML It’s reasonably straightforward to create a simple table when hand-coding markup. Thebare essentials of a single table is an opening <table> tag, followed by at least one tablerow (a <tr>), followed by at least o… Read More
  • Html Grammar The rules are in alphabetical order. The starting rule for an entire document is named html_document. a_content ::= heading   | text a_tag ::= <a>     {a_content}0 … Read More
  • HTML Paragraph HTML ParagraphParagraphs are defined with the <p> tag.<p>This is a paragraph</p><p>This is another paragraph</p>HTML '<p>' tag example<html><head><title>Example on the us… Read More
  • HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. <h1>This is a heading</h1> <h2>This i… Read More
  • Character Entities  Character Entities The following table lists the defined standard and proposed character entities for HTML and XHTML, as well as several that are nonstandard but generally supported. Entity names, if defined… Read More
  • HTML Examples HTML headings are defined with the <h1> to <h6> tags.<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>HTML ParagraphsHTML paragraphs are defined wi… Read More
  • Anatomy of an XHTML document Finally, let’s look at how a strict XHTML 1.0 document is laid out:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtm… Read More
  • Layers Spacers and multiple columns are natural extensions to conventional HTML, existing within a document's normal flow. With version 4, Netscape took HTML into an entirely new dimension with layers. It transforms the single-… Read More
  • text-shadow Shadows are another common feature of modern Web designs. Shadows add an element of depth to a page, but they can also enhance readability (if used properly) to lift a headline from the page. The text-shadow attribute was te… Read More
  • Html Core Attributes Prior to HTML 4.0, few attributes could be used consistently for all the HTML tags. HTML 4.0 changed this, defining a set of 16 core attributes that you can apply to almost all the elements in both HTML 4.01 and XHTML 1.… Read More
  • Divs and spans Divs and spans are two tags that, when used well, can help give your page a logical structureand some extra hooks to apply any CSS or DOM scripting that you might need later. Whenused badly, they can litter your document unn… Read More