PmWiki | 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

Question

How to make many columns in a page

Answer

(: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

Column 3

Normal text

To make 2 columns, only change width to 48%

Notes

Releases

Comments

Profiles March 15, 2006, at 04:46 AM

Good hint, but try to shorten Column3 and make the Column2 twice longer.
Then the Normal text starts in the 3rd column unles the 3rd column is padded to the height of the column with the maximal height.
The solution might be in nested divs ~~that are not supported by PmWiki~~.

From version 2.1.12 nested divs are supported. Luigi 8 August 2006

Or just add another div for the normal text. Pico March 15, 2006, at 06:08 AM

Still not sure about this: Where do I have to put all of this text. In the Wiki itself? (by pressing Shift-ALT-E and then paste the whole text and save?). When I do that I see the exact text instead of the formatted text? July 6, 2007

A: Make sure the whole DIV statement is on one line!. < -- that worked, thankyou!

(: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. 
(: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. 
(:divend:)

(:div style='text-align:justify; float:left; width:100%; padding-right:2%;
padding-bottom:5px;':)
!!Normal text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id
leo ultricies lobortis. Curabitur non quam. 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. 
(:divend:)

column 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Column 2

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.

Normal text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id leo ultricies lobortis. Curabitur non quam. 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.

Or just add a [[<<]]-type line-break after the columns and before the normal text:

(: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. 
(: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. 
(:divend:)
[[<<]]
!!Normal text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id
leo ultricies lobortis. Curabitur non quam. 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.

column 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Column 2

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.

Normal text

This works also with alternate-style divs. Blues

>>apply=div text-align=justify float=left width=31pct
padding-right=2pct padding-bottom=5px<<
!!Column 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
>><<
>>apply=div text-align=justify float=left width=31pct
padding-right=2pct 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.
>><<
>>apply=div text-align=justify float=left width=31pct
padding-right=2pct 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. 
>><<
>>apply=div text-align=justify float=left width=100pct
padding-right=2pct<<
!!Normal text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a ante id
leo ultricies lobortis. Curabitur non quam. 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. 
>><<

Column 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Column 2

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.

Normal text

Profiles November 21, 2006, at 09:28 PM

I can't get this to work. Is a php file required? Thanks, Matt
!!!!Figured this one out

You have to put the entire div statement on one line

- This is a great recipe, I just have the problem that all the lines of the columns seem to have a different ground line. So line 1 in column 1 starts on a lower vertical value (thus is higher) than line 1 in column 2 which in return is higher than line 1 in column 3. Is there a way out of this? -- best wishes, -- Torsten April 30, 2007, at 01:54 PM

Hi, I've just been playing with this, and it may be worth noting that if you add any blank lines into the markup, then they can be carried through to the final layout, and not ignored in the more usual PmWiki way. This recipe must be used EXACTLY as shown in the original markup, or they layout will be altered Des July 07, 2007, at 02:01 PM

Yes that was a great hint. I removed the white lines in the markup and it looks better now. Thanks a lot. Torsten July 15, 2007, at 05:22 AM

Contributors

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.

MakeManyColumns

Question

Answer

column 1

Column 2

Column 3

Normal text

Notes

Releases

Comments

column 1

Column 2

Column 3

Normal text

column 1

Column 2

Column 3

Normal text

Column 1

Column 2

Column 3

Normal text

See Also

Contributors