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. 

Array
(
    [post_max_size] => 64M
    [$_POST keys] => 
    [$_REQUEST keys] => n
    [$_SERVER] => Array
        (
            [CONTEXT_DOCUMENT_ROOT] => /home/pmwiki/public_html
            [CONTEXT_PREFIX] => 
            [DOCUMENT_ROOT] => /home/pmwiki/public_html
            [GATEWAY_INTERFACE] => CGI/1.1
            [HTTPS] => on
            [HTTP_ACCEPT] => */*
            [HTTP_ACCEPT_ENCODING] => gzip, br, zstd, deflate
            [HTTP_HOST] => www.pmwiki.org
            [HTTP_USER_AGENT] => Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
            [HTTP_X_HTTPS] => 1
            [PATH] => /bin:/usr/bin
            [PHP_INI_SCAN_DIR] => /opt/cpanel/ea-php70/root/etc:/opt/cpanel/ea-php70/root/etc/php.d:.
            [QUERY_STRING] => n=Cookbook%2fMakeManyColumns
            [REDIRECT_HTTPS] => on
            [REDIRECT_QUERY_STRING] => n=Cookbook%2fMakeManyColumns
            [REDIRECT_SCRIPT_URI] => https://www.pmwiki.org/wiki/Cookbook/MakeManyColumns
            [REDIRECT_SCRIPT_URL] => /wiki/Cookbook/MakeManyColumns
            [REDIRECT_SSL_TLS_SNI] => www.pmwiki.org
            [REDIRECT_STATUS] => 200
            [REDIRECT_UNIQUE_ID] => afH_1KRarC4_BnOM6MJsywAAAMo
            [REDIRECT_URL] => /wiki/Cookbook/MakeManyColumns
            [REMOTE_ADDR] => 216.73.216.31
            [REMOTE_PORT] => 29972
            [REQUEST_METHOD] => GET
            [REQUEST_SCHEME] => https
            [REQUEST_URI] => /wiki/Cookbook/MakeManyColumns
            [SCRIPT_FILENAME] => /home/pmwiki/public_html/index.php
            [SCRIPT_NAME] => /index.php
            [SCRIPT_URI] => https://www.pmwiki.org/wiki/Cookbook/MakeManyColumns
            [SCRIPT_URL] => /wiki/Cookbook/MakeManyColumns
            [SERVER_ADDR] => 23.254.203.248
            [SERVER_ADMIN] => webmaster@pmwiki.org
            [SERVER_NAME] => www.pmwiki.org
            [SERVER_PORT] => 443
            [SERVER_PROTOCOL] => HTTP/1.1
            [SERVER_SIGNATURE] => 
            [SERVER_SOFTWARE] => Apache
            [SSL_TLS_SNI] => www.pmwiki.org
            [TZ] => America/Los_Angeles
            [UNIQUE_ID] => afH_1KRarC4_BnOM6MJsywAAAMo
            [PHP_SELF] => /index.php
            [REQUEST_TIME_FLOAT] => 1777467348.9934
            [REQUEST_TIME] => 1777467348
            [argv] => Array
                (
                    [0] => n=Cookbook%2fMakeManyColumns
                )

            [argc] => 1
        )

)