How to do up to six columns of text in WordPress

HOW TO DO UP TO SIX COLUMNS OF TEXT IN WORDPRESS with lots of help from Jeremey L. Duvall of WordPress,
by Ashby McGowan

You can use the

tag along with the style attribute to create columns in an individual post or page. Plus see also: https://en.support.wordpress.com/code/posting-source-code/
For example, to split your content in two columns, you would use the following code:









	<div style="width:45%;padding:0 10px 0 0;float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1
</div>
<div style="width:45%;padding:0 10px 0 0;float:right;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
<div style="clear:both;"></div>

You can play with the values for width and padding to tweak your columns. This allows you to adjust the spacing between them, create columns of different widths, and make sure more columns fit your post or page in case you add them.

For example, for three columns, you would use the following code:















	<div style="width:33%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:33%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:33%;padding:0 10px 0 0;float:right;">
Your content
Your content
Your content
</div>
<div style=”clear:both;”></div>

Note how we changed the width attribute to 33% to make sure we could fit another column.

For four columns I (Ashby McGowan) have taken one of the float left column html instructions given above and cut and pasted it to make this a template for four columns. Do not copy and paste the numbers up the side-only the html coding. Place poem into text editor when your poem is complete. Check it is ok on preview. When using 4,5,or 6 columns use small text. Obviously change the width of each column to fit what you require-I have used 25% only as an example-use what you require (making sure that the total width is not over 100%):















	<div style="width:25%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:25%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:25%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:25%;padding:0 10px 0 0;float:right;">
Your content
Your content
Your content
</div>
<div style=”clear:both;”></div>

For five columns I have cut and pasted again. The “Sketch” Theme is a good one to use on WordPress as it is very wide.















	<div style="width:19%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:19%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:19%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:19%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:19%;padding:0 10px 0 0;float:right;">
Your content
Your content
Your content
</div>
<div style=”clear:both;”></div>

For six columns I have cut and pasted again. All these different multiple columns of text have been successfully tried out on WordPress Sketch Theme. For multi-voice poetry I can have anywhere from two to six voices speaking at the same time and so need up to six columns of text. Ashby McGowan















	<div style="width:16%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:16%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:16%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:16%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:16%;padding:0 10px 0 0;float:left;">
Your content
Your content
Your content
</div>
<div style="width:16%;padding:0 10px 0 0;float:right;">
Your content
Your content
Your content
</div>
<div style=”clear:both;”></div>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s