Recent Changes - Search:
Cookbook /

MakeManyColumns

Summary: How to make columns on a page using CSS
Version: n/a
Prerequisites: Requires at least PmWiki version: 2.0 and (any other recipes); last tested on PmWiki version: 2.0
Status:
Maintainer:
Categories: Layout, CSS
Discussion: MakeManyColumns-Talk

Question

How to make many columns in a page

Answer (old school)

(:div style='text-align:justify; float:left; width:31%; padding-right:2%; padding-bottom:5px;':)
!!column 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
(:divend:)
(:div style='text-align:justify; float:left; width:31%; padding-right:2%; padding-bottom:5px;':)
!!Column 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
(:divend:)
(:div style='text-align:justify; float:left; width:31%; padding-right:2%; padding-bottom:5px;':)
!!Column 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
(:divend:)
!!Normal text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

column 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Column 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Column 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Normal text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

To make 2 columns, only change width to 48%

Answer (modern css)

Css now supports making columns. For extended documentation look here.

using 'column-count' css property

(:div style='column-count: 3;':)
!!Column 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
!!Column 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
!!Column 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
(:divend:)
!!Normal text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Column 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Column 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Column 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Normal text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

To make 2 columns, only change the 'column-count' from 3 into 2.

using 'column-width' css property

The content is automatically show in as many columns which fit in the window width. 

(:div style='column-width: 300px;':)
!!Column 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
!!Column 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
!!Column 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.
(:divend:)
!!Normal text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Column 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Column 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Column 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

Normal text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. Aenean semper felis vitae nulla. Sed tincidunt tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a diam eu turpis tristique ultrices. Maecenas consectetuer.

If you resize the browser window then automatically the number of columns is adapted.

Notes

Releases

See Also

  • Columns   Create columns out of lists without using table markup
  • CreateColumns   quickly divides up a list of items into separate columns within a table
  • MakeColumns   Create columns on a page without using tables.
  • MakeManyColumns   How to make columns on a page using CSS
  • MultiColumn   Allow text to flow into multiple columns

Contributors

Comments

See discussion at MakeManyColumns-Talk

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.