`<multicol>` - Multiple Columns (Deprecated)

The `<multicol>` Element

Deprecated Non-standard

The <multicol> element was an early Netscape Navigator extension that attempted to create multi-column text layouts directly in HTML. It predated CSS layout capabilities and was removed from browsers due to lack of standardization and the introduction of proper CSS multi-column properties.

Historical Context

The <multicol> element was introduced in Netscape Navigator 3.0 (1996) as a way to create newspaper-style column layouts. It was one of many proprietary HTML extensions created during the “browser wars” era. The element was never part of any HTML standard and was eventually deprecated in favor of CSS-based solutions.

Historical Syntax

<!-- This element no longer works -->
<multicol cols="3" gutter="20" width="200">
  Content would flow into multiple columns here.
</multicol>

Historical Attributes

These attributes only worked in old Netscape browsers:

Attribute	Description	Values
`cols`	Number of columns	Positive integer (e.g., `2`, `3`, `4`)
`gutter`	Space between columns in pixels	Pixel value without unit (e.g., `20`)
`width`	Width of each column in pixels	Pixel value without unit (e.g., `200`)

Historical Example

<!-- This will NOT work in modern browsers -->
<multicol cols="3" gutter="15" width="150">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.</p>

  <p>Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur.</p>
</multicol>

Why It’s Deprecated

The <multicol> element was deprecated and removed for several reasons:

Non-standard: Only worked in Netscape Navigator. Never adopted by Internet Explorer, Opera, or other browsers, creating compatibility issues.

Limited functionality: Offered very basic column control compared to modern CSS capabilities. No support for column spanning, break control, or responsive design.

Separation of concerns: Mixed presentation (layout) with content (HTML), violating web standards principles that separate structure from styling.

CSS superseded it: The CSS Multi-column Layout Module provides far superior functionality with better browser support and more flexible control.

Security and maintenance: Proprietary browser features create security risks and maintenance burdens. Standards-based approaches are more secure and maintainable.

Modern Alternatives

CSS Multi-column Layout provides powerful, standardized multi-column functionality that works across all modern browsers.

Basic Columns with column-count

<div class="column-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>

<style>
.column-container {
  column-count: 3;
  column-gap: 20px;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="column-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>

<style>
.column-container {
  column-count: 3;
  column-gap: 20px;
}
</style>

The column-count property specifies the number of columns. Content flows automatically from one column to the next.

Auto-sizing Columns with column-width

<div class="auto-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium.</p>
</div>

<style>
.auto-columns {
  column-width: 200px;
  column-gap: 20px;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="auto-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium.</p>
</div>

<style>
.auto-columns {
  column-width: 200px;
  column-gap: 20px;
}
</style>

The column-width property sets an optimal column width. The browser creates as many columns as will fit.

Column Gap and Rules

<div class="styled-columns">
<h2>Multi-Column Article</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis.</p>
</div>

<style>
.styled-columns {
  column-count: 3;
  column-gap: 30px;
  column-rule: 2px solid #3498db;
}

.styled-columns h2 {
  column-span: all;
  text-align: center;
  border-bottom: 2px solid #2c3e50;
  margin-bottom: 1rem;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="styled-columns">
<h2>Multi-Column Article</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis.</p>
</div>

<style>
.styled-columns {
  column-count: 3;
  column-gap: 30px;
  column-rule: 2px solid #3498db;
}

.styled-columns h2 {
  column-span: all;
  text-align: center;
  border-bottom: 2px solid #2c3e50;
  margin-bottom: 1rem;
}
</style>

Customize column appearance with:

column-gap: Space between columns

column-rule: Visual divider between columns (similar to border syntax)

column-span: Allow elements to span across all columns

Controlling Column Breaks

<div class="break-control">
<article>
  <h3>Article One</h3>
  <p>This article stays together within one column.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

<article>
  <h3>Article Two</h3>
  <p>This article also stays together, avoiding awkward breaks.
  Sed do eiusmod tempor incididunt ut labore.</p>
</article>

<article>
  <h3>Article Three</h3>
  <p>Articles won't split across columns, maintaining readability.
  Ut enim ad minim veniam, quis nostrud exercitation.</p>
</article>

<article>
  <h3>Article Four</h3>
  <p>This ensures better reading experience in multi-column layouts.
  Duis aute irure dolor in reprehenderit in voluptate.</p>
</article>
</div>

<style>
.break-control {
  column-count: 2;
  column-gap: 25px;
  column-rule: 1px solid #ddd;
}

.break-control article {
  break-inside: avoid;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: #f9f9f9;
  border-radius: 4px;
}

.break-control h3 {
  margin-top: 0;
  color: #2c3e50;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="break-control">
<article>
  <h3>Article One</h3>
  <p>This article stays together within one column.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

<article>
  <h3>Article Two</h3>
  <p>This article also stays together, avoiding awkward breaks.
  Sed do eiusmod tempor incididunt ut labore.</p>
</article>

<article>
  <h3>Article Three</h3>
  <p>Articles won't split across columns, maintaining readability.
  Ut enim ad minim veniam, quis nostrud exercitation.</p>
</article>

<article>
  <h3>Article Four</h3>
  <p>This ensures better reading experience in multi-column layouts.
  Duis aute irure dolor in reprehenderit in voluptate.</p>
</article>
</div>

<style>
.break-control {
  column-count: 2;
  column-gap: 25px;
  column-rule: 1px solid #ddd;
}

.break-control article {
  break-inside: avoid;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: #f9f9f9;
  border-radius: 4px;
}

.break-control h3 {
  margin-top: 0;
  color: #2c3e50;
}
</style>

Use break-inside: avoid to prevent elements from breaking across columns. Other break properties:

break-before: Force a column break before an element

break-after: Force a column break after an element

break-inside: Control whether element can break across columns

Responsive Multi-Column Layout

<div class="responsive-columns">
<h2>Responsive Article Layout</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.</p>

<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt.</p>
</div>

<style>
.responsive-columns {
  column-width: 250px;
  column-gap: 20px;
  column-rule: 1px solid #e0e0e0;
  padding: 1rem;
}

.responsive-columns h2 {
  column-span: all;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* On very small screens, use single column */
@media (max-width: 500px) {
  .responsive-columns {
    column-width: auto;
    column-count: 1;
  }
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="responsive-columns">
<h2>Responsive Article Layout</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.</p>

<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt.</p>
</div>

<style>
.responsive-columns {
  column-width: 250px;
  column-gap: 20px;
  column-rule: 1px solid #e0e0e0;
  padding: 1rem;
}

.responsive-columns h2 {
  column-span: all;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* On very small screens, use single column */
@media (max-width: 500px) {
  .responsive-columns {
    column-width: auto;
    column-count: 1;
  }
}
</style>

Using column-width instead of column-count creates responsive layouts that automatically adjust to available space.

CSS Grid Alternative for Complex Layouts

For more complex layouts with different content in each column, CSS Grid provides better control:

<div class="grid-columns">
<div class="column">
  <h3>Column 1</h3>
  <p>Different content in each column with precise control.</p>
</div>

<div class="column">
  <h3>Column 2</h3>
  <p>Grid is better when columns have distinct content or structure.</p>
</div>

<div class="column">
  <h3>Column 3</h3>
  <p>Multi-column is better for flowing text content.</p>
</div>
</div>

<style>
.grid-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.column {
  padding: 1rem;
  background: #f5f5f5;
  border-left: 3px solid #3498db;
  border-radius: 4px;
}

.column h3 {
  margin-top: 0;
  color: #2c3e50;
}

@media (max-width: 768px) {
  .grid-columns {
    grid-template-columns: 1fr;
  }
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="grid-columns">
<div class="column">
  <h3>Column 1</h3>
  <p>Different content in each column with precise control.</p>
</div>

<div class="column">
  <h3>Column 2</h3>
  <p>Grid is better when columns have distinct content or structure.</p>
</div>

<div class="column">
  <h3>Column 3</h3>
  <p>Multi-column is better for flowing text content.</p>
</div>
</div>

<style>
.grid-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.column {
  padding: 1rem;
  background: #f5f5f5;
  border-left: 3px solid #3498db;
  border-radius: 4px;
}

.column h3 {
  margin-top: 0;
  color: #2c3e50;
}

@media (max-width: 768px) {
  .grid-columns {
    grid-template-columns: 1fr;
  }
}
</style>

Migration Guide

Converting from <multicol> to modern CSS:

<multicol cols="3" gutter="20" width="200">
  <p>Your content here...</p>
</multicol>

<div class="multi-column">
  <p>Your content here...</p>
</div>

<style>
  .multi-column {
    column-count: 3;
    column-gap: 20px;
    column-width: 200px;
  }
</style>

<div class="grid-layout">
  <div class="col">Content 1</div>
  <div class="col">Content 2</div>
  <div class="col">Content 3</div>
</div>

<style>
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    gap: 20px;
  }
</style>

Key Differences

CSS Multi-column Layout: Use when you have continuous text content that should flow naturally across columns (like newspaper articles, blog posts).

CSS Grid Layout: Use when you have distinct sections that need precise positioning or different content types in each column (like dashboards, card layouts).

Common CSS Multi-column Properties

.column-container {
  /* Number of columns */
  column-count: 3;

  /* Optimal column width (auto columns) */
  column-width: 250px;

  /* Shorthand for count and width */
  columns: 3 250px;

  /* Space between columns */
  column-gap: 20px;

  /* Visual divider between columns */
  column-rule: 1px solid #ccc;
  column-rule-color: #3498db;
  column-rule-style: solid;
  column-rule-width: 2px;

  /* Allow element to span columns */
  column-span: all; /* or none */

  /* Minimum column height */
  column-fill: balance; /* or auto */
}

/* Control breaks within elements */
.avoid-break {
  break-inside: avoid;
  page-break-inside: avoid; /* Legacy support */
}

Historical Browser Support

The <multicol> element was only supported in early Netscape browsers:

Browser	Support Period	Notes
Netscape Navigator	3.0 - 4.x (1996-1998)	Original implementation
Other browsers	Never supported	IE, Opera, Safari never implemented it
Modern browsers	No support	Completely removed from all browsers

Modern CSS Multi-column Browser Support

CSS Multi-column Layout is well-supported in all modern browsers:

Browser	Version	Notes
Chrome	50+	Full support
Firefox	52+	Full support
Safari	9+	Full support
Edge	12+	Full support
IE	10+	Partial support (lacks break properties)

CSS Multi-column Layout

The modern standard for multi-column text layouts. Learn more at MDN →

CSS Grid Layout

For complex layouts with distinct sections in each column. Learn more at CSS-Tricks →

CSS Flexbox

For flexible one-dimensional layouts. Learn more at MDN →

Deprecated Elements

Learn about other deprecated HTML elements to avoid. View all deprecated elements →

Specifications

CSS Multi-column Layout Module Level 1

W3C Specification

The official W3C specification for CSS multi-column properties that replaced the non-standard <multicol> element.

Additional Resources

MDN CSS Columns Documentation

Can I Use: CSS Columns

`<multicol>` - Multiple Columns (Deprecated)

The <multicol> Element

Historical Context

Historical Syntax

Historical Attributes

Historical Example

Why It’s Deprecated

Modern Alternatives

Basic Columns with column-count

Auto-sizing Columns with column-width

Column Gap and Rules

Controlling Column Breaks

Responsive Multi-Column Layout

CSS Grid Alternative for Complex Layouts

Migration Guide

Key Differences

Common CSS Multi-column Properties

Historical Browser Support

Modern CSS Multi-column Browser Support

Related Elements and Technologies

Specifications

The `<multicol>` Element