Using multi-columns of text
-
Ashby McGowan
Website: https://multivoicepoetry.wordpress.com/multi-voice-poetry-beginnings/
I write multi-voice poetry. I need to write in 2, 3, 4, 5, and in 6 columns of text. i.e. because I have anywhere from two to six voices speaking at the same time. WordPress does not allow tabs and so I have searched the internet for multi-column html sets of instructions that I can copy and use. I have tried out 5 sets of these. Only one of them has worked on WordPress-I have successfully used the three column set of html below for my poem Towards the sea. My 4 part poem Peace was still all over the place as it was prepared using the visual editor. Can you advise me of where I can obtain the html for 4, 5, and 6 columns please?
I have just (just now!) tried adding a third float left column to the three column html below (using cut and paste) and it did work. Making three float lefts and 1 float right. Can I do this for five and six columns i.e add another (and another) float left.
I have posted a message on a poetry WordPress site but no solutions have been forthcoming.
One other thing I have tried. I have replaced spaces in my poem Peace with plus signs. Then used Find and Replace to replace them (in Notepad) with non-breaking spaces on html. But that also did not work on WordPress. There were about six errors in placing text. It is a lengthy method and not ideal anyway.
Below is the three column html that worked on WordPress.
Columns (From https://en.support.wordpress.com/advanced-html/ )
You can use the <div> tag along with the style attribute to create columns in an individual post or page.
For example, to split your content in two columns, you would use the following code:
1
2
3
4
5
6
7
8
9
10
11
12 <div style=”width:40%;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 style=”width:40%;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>
This will create something like this:
Your content for your column #1
Your content for your column #1
Your content for your column #1
Your content for your column #2
Your content for your column #2
Your content for your column #2
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 <div style=”width:30%;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 style=”width:30%;padding:0 10px 0 0;float:left;”>
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
<div style=”width:30%;padding:0 10px 0 0;float:right;”>
Your content for your column #3
Your content for your column #3
Your content for your column #3
</div>
<div style=”clear:both;”></div>
Note how we changed the width attribute to 30% to make sure we could fit another column.The blog I need help with is: (visible only to logged in users)
-
-
Hi Galois, I have tried tables in the past but they never worked out in practise. I will give these ones a try when I get a chance. Many thanks. If I have a chance I will try adding another float left column and see if that works. It worked for 4 columns. I need to try it for 5 and for 6 columns. I am not html or CSS friendly.
cheers
Ashby -
-
I wrote this and tested it in my web page and it worked in html. However to show it to people in visual it will not work. I have tried again and again. So this works in html but I cannot post into visual as it gets changed. ?
Ashby
HOW TO DO UP TO SIX COLUMNS OF TEXT IN WORDPRESS
by Ashby McGowan
The bit below on 2 and 3 Columns is from
https://en.support.wordpress.com/advanced-html/You can use the <div> tag along with the style attribute to create columns in an individual post or page.
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. 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> -
Hi Ashby,
That column format you’re using is actually HTML. For it to work correctly, you will need to paste the code in the Text Editor. It will not work correctly if you paste it in the Visual Editor.
Are you trying to paste the code so that it shows up on your site so others can use it as well?
-
Hi Jeremey, Yes, I was trying to let other beginners see what html they need to use to write text in two to six columns. This works ok when in Text Editor. But when i put it in visual editor to let others make use of it-it gets mixed up. A few lines get pushed onto the next line. Is there any way I can overcome this? Thanks for replying.
regards
Ashby -
I was trying to let other beginners see what html they need to use to write text in two to six columns.
Ah! In order to do this, you’ll want to wrap it in code tags as explained here:
https://en.support.wordpress.com/code/posting-source-code/
You can write this in the Visual Editor. Here’s a screenshot of how the text would look in the editor:
Here’s the full text I used:
[code language="html"]<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> [/code]Can you give that a try?
-
Hi Jeremey,
I tried it by adding the extra code at start and end but there was lots of coding and numbers added. And it cut out a lot of the explanatory text.
I enclose what I was posting:
Regards
AshbyHOW TO DO UP TO SIX COLUMNS OF TEXT IN WORDPRESS with lots of help from Jeremey L. Duvall of WordPress,
by Ashby McGowanYou can use the <div> 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 [please do not use the two bits of code in square brackets as that is only needed to allow the Visual Editor to not change any of the coding]:[code language="html"]
<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. 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>
[/code] -
Hi Jeremey,
I tried it by adding the extra code at start and end but there was lots of coding and numbers added. And it cut out a lot of the explanatory text.
I enclose what I was posting:
Regards
Ashby
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 [please do not use the two bits of code in square brackets as that is only needed to allow the Visual Editor to not change any of the coding]:
1
From: WordPress.com Support Forums [mailto:(email visible only to moderators and staff)] Sent: 18 May 2015 14:48To: AMcGowanSubject: [WordPress.com Forums] Using multi-columns of text
jeremeylduvall replied to a forum topic that you subscribe to
in response to the topic “Using multi-columns of text”:
I was trying to let other beginners see what html they need to use to write text in two to six columns.
Ah! In order to do this, you’ll want to wrap it in code tags as explained here:
https://en.support.wordpress.com/code/posting-source-code/
You can write this in the Visual Editor. Here’s a screenshot of how the text would look in the editor:
Here’s the full text I used:
1Can you give that a try?
Reply View forum topic
Want less email? Unsubscribe from this topic
Thanks for flying with WordPress.com
Glasgow – Proud Host City of the 2014 Commonwealth Games
-
Hi, Jeremey, I also tried putting the code tags just around each of the column html-so opening and closing tags for each set of html column instructions. That was much better but it still has lots of intro comments like “body” and other titles, and numbers up the side. Is there no way round that? cheers Ashby
-
Hey Ashby,
The content should look just like this when published:
Could you point me to the page or post on your site where you’re trying to add this in? Happy to take a look!
-
Hi Jeremy
That’s not what I saw. I will put on just now on my multi-voice site. Are you able to look at it? I don’t want to publish it again because I had the last published all mixed up and I had to delete. I have trashed about 12 posts after trying them out in preview. And had one deleted that was published to all my face book accounts etc.
Regards
Ashby
From: WordPress.com Support Forums [mailto:(email visible only to moderators and staff)] Sent: 19 May 2015 15:49To: AMcGowanSubject: [WordPress.com Forums] Using multi-columns of text
jeremeylduvall replied to a forum topic that you subscribe to
in response to the topic “Using multi-columns of text”:
Hey Ashby,
The content should look just like this when published:
Could you point me to the page or post on your site where you’re trying to add this in? Happy to take a look!
Reply View forum topic
Want less email? Unsubscribe from this topic
Thanks for flying with WordPress.com
Glasgow – Proud Host City of the 2014 Commonwealth Games
-
Hi Jeremy,
I have numbers up the left. I don’t know if that is a big thing or not? Before every multi-column html code I have pre and table, and tbody, and tr, and tdtd, and td. And at the end of every one I have an em.
The other point is that the coding you told me to use is not seen. But I would like to show visitors to the site exactly what they need to write to post a multi-column text. So just those two points.
Regards
Ashby
From: WordPress.com Support Forums [mailto:(email visible only to moderators and staff)] Sent: 19 May 2015 15:49To: AMcGowanSubject: [WordPress.com Forums] Using multi-columns of text
jeremeylduvall replied to a forum topic that you subscribe to
in response to the topic “Using multi-columns of text”:
Hey Ashby,
The content should look just like this when published:
Could you point me to the page or post on your site where you’re trying to add this in? Happy to take a look!
Reply View forum topic
Want less email? Unsubscribe from this topic
Thanks for flying with WordPress.com
Glasgow – Proud Host City of the 2014 Commonwealth Games
-
From: WordPress.com Support Forums [mailto:(email visible only to moderators and staff)] Sent: 19 May 2015 15:49To: AMcGowanSubject: [WordPress.com Forums] Using multi-columns of text
jeremeylduvall replied to a forum topic that you subscribe to
in response to the topic “Using multi-columns of text”:
Hey Ashby,
The content should look just like this when published:
Could you point me to the page or post on your site where you’re trying to add this in? Happy to take a look!
Reply View forum topic
Want less email? Unsubscribe from this topic
Thanks for flying with WordPress.com
Glasgow – Proud Host City of the 2014 Commonwealth Games
[attach 1]
-
Hi Jeremy,
I have to leave work now so I have saved the post in trash rather than publish it . Can you get on to see it? I hope you got the screen shot of what I see.
Thanks for the help
Ashby
From: WordPress.com Support Forums [mailto:(email visible only to moderators and staff)] Sent: 19 May 2015 15:49To: AMcGowanSubject: [WordPress.com Forums] Using multi-columns of text
jeremeylduvall replied to a forum topic that you subscribe to
in response to the topic “Using multi-columns of text”:
Hey Ashby,
The content should look just like this when published:
Could you point me to the page or post on your site where you’re trying to add this in? Happy to take a look!
Reply View forum topic
Want less email? Unsubscribe from this topic
Thanks for flying with WordPress.com
Glasgow – Proud Host City of the 2014 Commonwealth Games
-
Hi Ashby!
I can see the posts in your Trash. However, in order to view them, I’ll need to restore them to your site. We can leave them as drafts so they will not be visible to readers. Would that work? If so, can you visit your Trash here:
https://multivoicepoetry.wordpress.com/wp-admin/edit.php?post_status=trash&post_type=post
Hover over the post that provides the example and click “Restore”. Then, just let me know when this is done, and I’ll take a look!
-
Hi Jeremy,
I have just put the article in again just now and saved as draft. As you know, I just want to help people to do multi-voice columns in WordPress. All the things I have seen on the web-none of them worked for me. I would like a visitor to be able to cut and paste the formats and insert their own poetry. I intend it to be a template. Even if you can think of a way for me to do this with none of the extra html instructions like Body etc I would still need to tell people they have to add your wrapping in code instructions won’t I ? Because they will be invisible. But that can easily be done as a separate instruction.
Many thanks for the help.
I am of on holiday till Tuesday but if I can will log onto WordPress but since I use a work email I won’t be at emails until Tuesday.Enjoy the weekend!
Cheers
Ashby -
Hi Jeremy,
I have just put the article in again just now and saved as draft. As you know, I just want to help people to do multi-voice columns in WordPress. All the things I have seen on the web-none of them worked for me. I would like a visitor to be able to cut and paste the formats and insert their own poetry. I intend it to be a template. Even if you can think of a way for me to do this with none of the extra html instructions like Body etc I would still need to tell people they have to add your wrapping in code instructions won’t I ? Because they will be invisible. But that can easily be done as a separate instruction.
Many thanks for the help.
I am of on holiday till Tuesday but if I can will log onto WordPress but since I use a work email I won’t be at emails until Tuesday.
Because I use a work email I have to use the classic WordPress browser as my work server blocks access to the other one. I also use the Public Libraries to look at my website but only the classic browser is free to browse there
Enjoy the weekend!
Cheers
Ashby
From: WordPress.com Support Forums [mailto:(email visible only to moderators and staff)] Sent: 21 May 2015 15:35To: AMcGowanSubject: [WordPress.com Forums] Using multi-columns of text
jeremeylduvall replied to a forum topic that you subscribe to
in response to the topic “Using multi-columns of text”:
Hi Ashby!
I can see the posts in your Trash. However, in order to view them, I’ll need to restore them to your site. We can leave them as drafts so they will not be visible to readers. Would that work? If so, can you visit your Trash here:
https://multivoicepoetry.wordpress.com/wp-admin/edit.php?post_status=trash&post_type=post
Hover over the post that provides the example and click “Restore”. Then, just let me know when this is done, and I’ll take a look!
Reply View forum topic
Want less email? Unsubscribe from this topic
Thanks for flying with WordPress.com
Glasgow – Proud Host City of the 2014 Commonwealth Games
-
Hi Ashby,
When I preview your post titled “How to do up to six columns of text in WordPress”, the source code is appearing as intended on my side. Here’s what I’m seeing:
Your visitors can copy and paste this HTML code as shown here:
They will just need to make sure they select just the code, not the line reference numbers.
Even if you can think of a way for me to do this with none of the extra html instructions like Body etc I would still need to tell people they have to add your wrapping in code instructions won’t I ? Because they will be invisible. But that can easily be done as a separate instruction.
If you would like contributors to add their poems in columns, you will need to use HTML formatting. I would just tell them to copy the HTML, paste it into the Text Editor, and replace the default column text with their poem. Would that work?
- The topic ‘Using multi-columns of text’ is closed to new replies.
WordPress.com Forums 