MakeManyColumns
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 1Lorem 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 2Lorem 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 3Lorem 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 textLorem 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 1Lorem 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 2Lorem 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 3Lorem 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 textLorem 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 1Lorem 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 2Lorem 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 3Lorem 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 textLorem 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 tables out of lists
- MultiColumn - Allow text to flow into multiple columns
- MakeColumns - Create n-columns by explicit saying where a new column starts.
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.