Quick Code
Introduction[]
Columns are an HTML, CSS, and WikiText attribute that adjusts the size and number of text columns. It's similar to Float, but more text-based.
The Code[]
To use the Columns attribute, type in:
<div style="columns: __px _">TEXT</div>
Fill in the first blank with the number of pixels (in width) you want your columns to be. Fill in the second blank with how many columns you want.
Note: You'll have to have a lot of text, or specify how tall you want your columns to be (using the Height attribute:<div style="height: _px;">) before you actually get multiple columns!
Examples[]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euihsmod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
The code for this:
<div style="columns: 50px 3; height: 100px;">Text here</div>
Lorem ipsum dolor sit amet. Ab quam Quis et porro odit aut voluptatem Quis sit optio velit sit unde repudiandae sit rerum dolor non dolorem quasi! In deleniti praesentium hic nisi expedita et veniam laboriosam ea quia dicta qui quos omnis et maxime minima. Non soluta dolore aut maiores minima ab aperiam odio eum enim illum. Ut amet accusantium vel quia amet et perferendis natus et autem voluptas. Eum aspernatur omnis qui sunt corporis et dignissimos quis ad perferendis quidem quo sunt error? Est officiis reprehenderit sit minima perferendis ut omnis nulla vel blanditiis excepturi! Sed velit recusandae aut voluptatibus quisquam et soluta numquam et deleniti enim aut
The code for this:
<div style="columns: 80px 4; height: 100px;">Text here</div>
Vertical line in Columns[]
Vertical line in columns used to separate the text in Columns.
Examples[]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euihsmod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
The code for this:
<div style="columns: 3; column-rule: 2px solid black; column-gap: 40px; padding: 0 20px;">Text here</div>
Lorem ipsum dolor sit amet. Ab quam Quis et porro odit aut voluptatem Quis sit optio velit sit unde repudiandae sit rerum dolor non dolorem quasi! In deleniti praesentium hic nisi expedita et veniam laboriosam ea quia dicta qui quos omnis et maxime minima. Non soluta dolore aut maiores minima ab aperiam odio eum enim illum. Ut amet accusantium vel quia amet et perferendis natus et autem voluptas. Eum aspernatur omnis qui sunt corporis et dignissimos quis ad perferendis quidem quo sunt error? Est officiis reprehenderit sit minima perferendis ut omnis nulla vel blanditiis excepturi! Sed velit recusandae aut voluptatibus quisquam et soluta numquam et deleniti enim aut voluptas dolore et inventore sapiente aut sapiente quam.
The code for this:
<div style="columns: 4; column-rule: 2px solid black; column-gap:30px; padding: 0 20px;">Text here</div>