CSS Columns

Elements can cross columns

This example text is taken from the Wikipedia page on Columns:

A column or pillar in architecture and structural engineering is a structural element that transmits, through compression, the weight of the structure above to other structural elements below. In other words, a column is a compression member. The term column applies especially to a large round support (the shaft of the column) with a capital and a base or pedestal, which is made of stone, or appearing to be so. A small wooden or metal support is typically called a post, and supports with a rectangular or other non-round section are usually called piers.

For the purpose of wind or earthquake engineering, columns may be designed to resist lateral forces. Other compression members are often termed “columns” because of the similar stress conditions. Columns are frequently used to support beams or arches on which the upper parts of walls or ceilings rest. In architecture, “column” refers to such a structural element that also has certain proportional and decorative features. A column might also be a decorative element not needed for structural purposes; many columns are engaged, that is to say form part of a wall.

In ancient Egyptian architecture as early as 2600 BC, the architect Imhotep made use of stone columns whose surface was carved to reflect the organic form of bundled reeds, like papyrus, lotus and palm. In later Egyptian architecture faceted cylinders were also common. Their form is thought to derive from archaic reed-built shrines. Carved from stone, the columns were highly decorated with carved and painted hieroglyphs, texts, ritual imagery and natural motifs. Egyptian columns are famously present in the Great Hypostyle Hall of Karnak (circa 1224 BC), where 134 columns are lined up in sixteen rows, with some columns reaching heights of 24 metres.

<style>
#column-example {
  font-size: .8em;
}
#column-example > div {
  column-count: 2;
  column-gap: 2em;
  column-rule: 1px solid gray;
}
#column-example > div > h3 {
  column-span: all;
  text-align: center;
}
</style>
<div id="column-example" class="example-block">
  <div>
    <h3>Elements can cross columns</h3>
    <!-- text goes here -->
  </div>
</div>

Leave a Reply

Your email address will not be published.

Color scheme: