Alignment, Blank lines, Html & inline css codes, Images, Line breaks, Space between paragraphs, Text-wrap, Two-column text

Formatting text pt. 1: blank lines, alignment, wrap-around, two columns

Posted by Panos ⋅ June 10, 2009 ⋅ 113 Comments

https://wpbtips.wordpress.com/

Paragraph breaks and blank lines

Pressing return in the visual editor gives a line break plus a blank line. If you want a line break only, you press shift-return. In the html editor, pressing return once gives a line break, pressing it twice gives a line break plus a blank line.

If you want more blank space between paragraphs, you cannot do it by pressing return repeatedly, because the HTML web standard is no multiple line breaks (no multiple spaces either). You need to add padding or margin to your paragraph in the HTML post or page editor.[*] You can add it above a paragraph, or below it, or both; change the number to adjust the amount of extra space:

(Or write margin in place of padding).
To add extra space below and/or above larger sections comprising more than one paragraph, you use div and /div in place of p and /p.

For extra space above and below an image, you add this to the image code, after “img” (again, adjust by changing the numbers):

style="margin-top:12px;margin-bottom:10px;"

Or, in the visual editor: click image, click edit button (mountain icon), click Advanced Settings, type number in the “Vertical space” box, click Update, update post or page.

[*] In text widgets you can use a simpler alternative (see here). In the post or page editor, avoid solutions such as div or p tags enclosing nothing (or enclosing a space, or enclosing the html for a space): they are stripped out if you switch the editor to visual.

Alignment

To set text alignment, you can highlight the text in the visual post or page editor and click the relevant button (for the function of all the buttons of the visual editor see here).

But this isn’t always safe, among other reasons because in the visual editor you cannot see or control exactly what you’re selecting. In the html editor, the code for setting the alignment of a single paragraph is this:

Where I’ve put DEFINE, you write left, right, center or justify. Usually you don’t need to specify left alignment, since that’s the default (when the blog language is set to English or any other left-to-right language).

For more than one paragraph, you write div and /div in place of p and /p. Or you use this code (again DEFINE should be left, right, center or justify):

TEXT HERE
</div>

Note on coding: when you want to apply multiple commands to the same chunk of text, you combine the relevant pieces of code within the same “div” or “p” tag. For example:

TEXT HERE
</div>

Text wrap

To have text wrapping around an image, you don’t interfere with the text: you set the image alignment to either left or right.

You can specify that when you initially insert an image. You can also change the alignment of an already inserted image: in the visual editor, you click on the image, click the edit button (the mountain icon), click the desired alignment option, click Update; in the html editor, you modify the relevant part of the image code (“alignnone”, “aligncenter”, “alignleft”, “alignright”).

In some themes you automatically get some space around images; in other themes you get no such space, which means that text wrapping around images will stick too close to them. In that case you must add space yourself: in the visual editor, you click on the image, click the edit button, click “Advanced Settings”, set a number in the “Horizontal space” box, click Update; in the html editor, you add this inside the image code (with a space before and a space after):

style="margin-right:12px;"

(Of course margin-right is for a left-aligned image; for a right-aligned image you use margin-left; and the number is just an example – you can change it.)

For text wrapping around a video, see here; for text wrapping around a poll or a gallery, see here.

Setting the alignment of an image to left or right means that the rest of the content will wrap around. So:
a) The image needs to be at the beginning of the paragraph that should wrap around.
b) If you only want a short paragraph next to the image, and the rest of the text below the image, you need to add this after that paragraph:

Two columns (or more)

The simplest way (for fixed-width themes) is this:

LEFT CONTENT HERE
</div>

RIGHT CONTENT HERE
</div>

You can change the percentages, to adjust the amount of blank space between the columns, or to create columns of unequal width; make sure the sum remains lower than 100%.

On flexible-width themes you’d better use this:

LEFT CONTENT HERE
</div></div>

RIGHT CONTENT HERE
</div></div>

You can change the padding numbers, to adjust the amount of blank space between the columns; or you can change the percentages, to create columns of unequal width; make sure their sum remains 100%.

The same type of coding can be used to create more than two columns: setting all the divs that define each column to float left (with appropriate width percentages) will make all of them show up side by side.

https://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.

Discussion

113 thoughts on “Formatting text pt. 1: blank lines, alignment, wrap-around, two columns”

Hi Pan-it’s me (jj) wearing my other wp persona here. Just wondering why when I click on the “comments” link on your front page it brings up a 404 error, as it does here on the Post page itself. Odd.

Also wished I’d known the above when I was moving over my knitting site to wp.com. Very helpful, as always.

Posted by yarnaholic | June 10, 2009, 06:58
@yarnaholic: Because the link is not the original one of the theme; it’s hand-crafted, and this time I forgot to paste the URL. These posts involve a lot of copy-pasting, and I may miss a step here and there before I have the chance to check things again. Thanks for pointing out!

(And what’s your opinion on the above pingback?)

Posted by Panos | June 10, 2009, 16:14
Three pages of entries for 10 June 09. Yours is currently on the second. But, it looks harmless and it’s a link. Of course now I’ve given that blog 4 hits…

Posted by Tess | June 10, 2009, 18:23
Didn’t look around much, so I can’t tell if it’s a legitimate aggregator or just splogging. But I’ve seen to it anyway, I think: all my posts start with an invisible blog URL (shows in the RSS).

Posted by Panos | June 10, 2009, 19:36
Definitely looks to be an RSS aggregator, but … why? Been around since 2003 and it doesn’t have an ad on it anywhere!? Color me amazed.

Posted by yarnaholic | June 10, 2009, 20:19
line-height don’t work, dunno why

Posted by delk | August 28, 2009, 19:03
@delk: Can’t tell without a link to a relevant post.

Posted by Panos | September 1, 2009, 06:34
Where do we paste the content for two columns as you suggest above, I’m new to WordPress…

Posted by Hinshaw | October 29, 2009, 23:21
@Hinshaw: The post editor has two modes, Visual and HTML (you toggle between them via the tabs above the main text box). Visual is where you see approximately what you’ll get in the published post; HTML is the code for what you see. All the codes I give in my posts are meant to be pasted in the HTML editor.

Posted by Panos | October 29, 2009, 23:51
For extra space above and below an image, you add this to the image code (again, adjust by changing the numbers):

style=”margin-left:12px;margin-right:12px;”

Shouldn’t that be top and bottom rather than left and right?

Posted by Tess | December 21, 2009, 17:04
Gasp – yes of course! I’m surprised that this (you know, the familiar copy-paste-and-forget-to-edit effect) has been sitting there for six months. Thanks once again!

Posted by Panos | December 21, 2009, 19:27
Thank you! I have tried all the other solutions out there. Nothing had worked. This works well!

Posted by cv | February 9, 2010, 21:59
@cv: You’re welcome! (My post includes several suggestions, so which one is “this”?)

Posted by Panos | February 9, 2010, 22:48
Awesome code! i have been looking all over for the code to make columns. Very nice, you have all the different types of columns I need.

Posted by Online Business Starter | February 10, 2010, 06:42
Can you please please tell me how to keep WordPress from wrapping text around a Left justified picture? No amount of padding or borders will keep this from happening, and it’s driving all of us crazy! Why is this the default? I’d just like the picture alone, without text on its right margin. Is this too much to ask?
Thanks,
Jerome

Posted by Jerome | February 16, 2010, 06:49
@Jerome: No it’s not too much to ask, it’s html in general, not WP, and it’s simple. The whole point of left or right alignment is wrapping around; for an image placed left but with no text-wrap, you set the alignment to none.

Posted by Panos | February 16, 2010, 12:13
Thank you! I was having a terrible time trying to format my poems–I didn’t know all I had to do was just hold down the shift button while I hit enter!

Posted by Amy | March 17, 2010, 06:47
You’re welcome!

Posted by Panos | March 17, 2010, 14:20
Buttons / tiny banners in the footer of my blog are set vertically.
How to make one button parallel with the others (horizontally) before moving to the bottom. There are lots of empty space in the right area.

Many thanks.

Posted by Mufi | March 28, 2010, 19:55
@Mufi: The simplest solution for placing them in rows of two is a table; basic form:

<table border="0">
<tr><td>BANNER1 CODE HERE</td><td>BANNER2 CODE HERE</td></tr>
<tr><td>BANNER3 CODE HERE</td><td>BANNER4 CODE HERE</td></tr>
etc.
</table>

Placement and distances can be changed via additional commands, but I can’t use the theme you’re using, so just try this first, see if it works, tell me what adjustments you’d like.

Might look better if you enclose the whole thing in a box. See bottom of my right sidebar for a specimen and let me know if you’re interested in something like that.

Posted by Panos | March 28, 2010, 21:43
Thank you very much. I’ve been looking for hours for a way to introduce an empty space between things within Word Press. All forums were talking about CSS, Br, P and other tags and nothing worked. Finally, I have found it!!!

Thank you again. Why does it sometimes take such a long time to find sth really good?

Cheers
Kamil

Posted by IT Support | March 31, 2010, 20:22
@Kamil: You’re welcome!

Why does it sometimes take long? Well, I think it’s because you’ll find countless webpages if you google for stuff like that, and because some of them are amateurish, slapdash, or outdated, or apply to different platforms.

Posted by Panos | April 1, 2010, 01:42
Whattttttttt!

You need to explain more on where to put this code, if I place into a post it just shows it……

Do I need to place it into the coding file that the page is sitting in?

Cheers

Posted by Wa! | April 9, 2010, 14:00
@Wa!: In the html post or page editor (as the post says).

Posted by Panos | April 9, 2010, 21:33
Wow! Thanks a million times! I am not an html mogul, but I had to do something that requires me to have two columns on a page on my wordpress/website and your advice save my day! I know it’s pretty simple… but Thanks again and have a great day!

p.luc ;-)_

Posted by Pierre-Luc Poulin | April 12, 2010, 21:37
@Pierre-Luc: You’re welcome and I’m glad the post was of help!

I usually like to see how my suggestions are applied; care to link to the page in question?

Posted by Panos | April 13, 2010, 01:30
Here it is:

http://formationplp.com/merci-pour-dix-belles-annees/

It’s in French, don’t be afraid!

;-)

Posted by Pierre-Luc Poulin | April 13, 2010, 02:09
Thanks!
(You were absolutely right when you said the page “required” two columns: would have looked quite unprofessional without that.)

Posted by Panos | April 13, 2010, 04:34
Hope you’re the oasis in the desert of html hell. I’ve been trying for several weeks to add extra white space between paragraphs, above & below headers etc. I have tried your suggestions with no luck. I tried padding above/below, I’ve used div, hitting return, enter, etc. … And the weirdest things happen … I can save the page, it looks perfect, then I do a bit more work, like adding more text somewhere else on the page, or going to another page/post, save it again and all the html padding etc is stripped out and the spacing is gone. ARGH! I’m currently working on the page “E & S Test”. Another weird thing … on “Events & Shows” (different page) … last year, somehow, I was able to get a serif font (you can see it on the items near the bottom.) Try as I might I can’t get this again … just the default font for WP. Is there anything you might suggest other than valium? Thanks, Sally (I live in hope for an answer ;-) )

Posted by Beau Dangles | April 18, 2010, 00:41

@Beau Dangles,
(begging pardon of Panos ≥^!^≤ ~panos, go ahead and answer questions on my blog too~)
but it looks as though you are using pre-formatted text to make your page?

examples:

…<p><big><big><big><span style="color:#808080;"><strong>2010</strong></span></big></big></big></p>
<p><span style="color:#808080;">I’ve been busy preparing for …

… some wonderful Alberta talent.</p>
<p style="padding-top:3px;padding-bottom:2px;">
<p style="padding-top:1.2em;padding-bottom:1.5em;">
<h2><strong><span style="color:#808080;">MAY   2010<…

Posted by Tess | April 18, 2010, 01:32

@Sally: Tess is right, it seems that some of your content has been directly transferred from another code-rich source (Word?), which is (or rather was) a no-no. But your html is very messy in other ways too.

Some preliminary suggestions:
a) Go to Settings>Writing and enable the option “WordPress should correct invalidly nested XHTML automatically”, so that any unclosed tags (you’ve got several) will be taken care of when you do more editing.
b) Don’t use the buttons of the editor for multiple operations on the same text.
c) “span” is for words or phrases within a paragraph. Use “p” for a complete paragraph, “div” for more than one paragraph.
d) For font sizes, use percentages, not px.
e) Don’t use multiple tags for the same text. For instance, instead of something like this:

<p style="padding-left:30px;"><span style="color:#0da4f1;"><big>HEADING HERE</big></span></p>

We write:

<p style="font-size:150%;color:#0da4f1;padding-left:30px;">HEADING HERE</p>

I can’t correct everything in those two pages – too many things to prune or change. Instead I’d say publish a new test page, put nothing but plain text in it, tell me how exactly you’d like it to be, and then I suggest ways to do it (could be done via comments on that page, comments which you will then delete).

In the meantime have a look at this too:
https://wpbtips.wordpress.com/2009/07/11/formatting-text-pt-5/

Posted by Panos | April 18, 2010, 08:53
Zowie! IYou must be wearing your Superman outfit …. cause you just solved all my problems. (Okay, not all my problems, but at least the ones I was having with html.)

Your web site is a gold mine … I’m now a happy little html’er. And the page looks oh-so-much better.

A big bucket of hugs to you. Thanks to Tess as well for her ideas.

Thanks,
Sally

Posted by Beau Dangles | April 19, 2010, 00:26
Wow! I just checked the source code of your page: my compliments on doing all the pruning and changing successfully yourself!

Posted by Panos | April 19, 2010, 06:44
You Sir, are a legend!…at least for the time being. :)

Your suggestion of;

ANY CHARACTER HERE

has sorted my html paragraph break problem out perfectly.

Thank you very much Panos!

Posted by JD | April 27, 2010, 00:50
Oops, going to have to double post here. Seems the code has been taken out of my last post – will have to reword. The upper most suggestion on the page was the one I was referring to.

Cheers again!

Posted by JD | April 27, 2010, 00:53
@JD: You’re welcome! The invisible-character solution is the only stable one for blank space: as I mention in the post, the WP editor tends to strip out no-content sections.

PS The code you pasted was stripped out because visitors are allowed very little html in comments (links, bold, italics and a few other things). But if it wasn’t stripped out, again it wouldn’t display: it would produce the result it’s meant to produce. To display code in a comment, the easy solution is to enclose it in the “sourcecode” shortcode.

Posted by Panos | April 27, 2010, 09:30
just learned how to break line in wp, thx for all.

Posted by murato | April 28, 2010, 15:35
@murato: You’re welcome!

Posted by Panos | April 29, 2010, 10:46
You’re a life saver! I have a blog in WordPress and I was getting so frustrated with trying every single code I found on the web to get a blank line that would not disappear!

Your code is the only that works and STAYS!

Posted by Jungle | May 14, 2010, 10:47
@Jungle: You’re welcome! Yes it’s the only one that stays, because it’s got some content; invisible, but content nevertheless.

Posted by Panos | May 15, 2010, 04:25
hello,

This page has helped me a lot, especially “Paragraph breaks and blank lines.”

Thank you!

Posted by merillion | May 25, 2010, 21:24
Hi merillion, and you’re welcome!

Posted by Panos | May 26, 2010, 11:28
One more solition here:
http://wordpress.org/support/topic/404135?replies=1

ver 2.9.2

Posted by meekman | May 28, 2010, 17:35
@meekman: Thanks (although my blog is about wp.com blogs)!

Posted by Panos | May 29, 2010, 01:02
this is great! thanks for posting this…

Posted by stuart | June 11, 2010, 19:37
@stuart: You’re welcome! (This is one of my most popular posts, because a lot of users justifiably search for solutions to these classic problems.)

Posted by Panos | June 12, 2010, 04:37
Is it possible to put this code somewhere in the template so that i automaticaly have two columns when i open a new post?
Thanks

Posted by Ojuls | June 12, 2010, 12:13
@Ojuls: As far as I know, no. All these codes have to do with formatting specific portions of the actual content you type in: even if you could put the code “somewhere in the template”, the post editor wouldn’t know about it.

Users occasionally ask for improvements to the editor that would allow you to add something automatically (for instance a copyright notice); so far nothing of the sort is possible.

Posted by Panos | June 12, 2010, 15:27
Thanks! The part about creating columns with divs saved my sanity. Perhaps you can help with a related issue. How can I get rid of a blank line between to lines of text that are formatted differently in a post? For example:

Heading
Description
Text

I want to get rid of the blank line that appears between my Heading, Description and Text when I publish the post.

Posted by Rod | July 24, 2010, 18:05
Hi. I probably can, but I need to see the published post first, so I can check its source code and see exactly how you have formatted it. Or you can paste the relevant part here; to make the code show up, paste it like this:
[sourcecode language=”html”]
Code here
[/sourcecode]

Posted by Panos | July 24, 2010, 19:14
Hi Panos, Here’s a page with an example of what I’m talking about: http://fgmea.org/photos I want to get rid of the blank line between “Photo Gallery” and “Click image to enlarge….” Here’s what I have in my HTML editor for this page:

<h2>Photo Gallery</h2>
Click image to enlarge. Press F11 for full-screen view.
<h5>Winter Concert at Pine Spring ES (submitted by Christina Matula)[nggallery id=6]</h5>
<h5>Medieval Day at Freedom Hill ES (submitted by Gretchen Lynch)[nggallery id=7]</h5>

BTW, I clicked to 2 “notify me” boxes below, and received confirmation e-mails, but the confirm link in each was dead.

Thnaks, Rod

Posted by Rod | July 24, 2010, 20:20
One way to do it is by applying negative margins to the middle line:

<h2>Photo Gallery</h2>
<p style="margin-top:-24px;margin-bottom:-6px;">Click image to enlarge. Press F11 for full-screen view.</p>
<h5>Winter Concert at Pine Spring ES (submitted by Christina Matula)</h5>

Another way is by adjusting the line-height of each line:

<h2 style="height:12px;">Photo Gallery</h2>
<p style="height:14px;">Click image to enlarge. Press F11 for full-screen view.</p>

There are other ways too, but those two should be enough. All px numbers above are arbitrary examples: play with them till you get the spacing you prefer.

Posted by Panos | July 24, 2010, 21:27
Wow, so simple! Both methods have their uses. The ability to tweak the numbers is really nice. Really simple for this particular instance, http://fgmea.org/photos , a -15 top margin for the second line of text is all I need:

<h2>Photo Gallery</h2>
<p style="margin-top:-15px;">Click image to enlarge. Press F11 for full-screen view.</p>

Everything else falls where is needs to. Thank you, thank you! I noticed I can also move my page title closer to the top of the page, but I’m guessing I should edit my template for something like that. I have much to learn and have been learning a lot in the past 24 hours from your excellent articles. Kudos!

Rod

Posted by rodtompkins | July 24, 2010, 23:05
@Rod: You’re welcome and thanks!

Posted by Panos | July 26, 2010, 08:36
hi,
very helpful indeed. i find it a bit strange that wordpress is not able to accept the blank line by default which make things very hard to align.

Posted by james k rajoo | September 27, 2010, 10:17
@JKR: Yes it feels strange to anyone accustomed to typing and using text editing applications. But it’s not a limitation in WP in particular, it’s the HTML web standard: no multiple returns, no multiple spaces.

Posted by Panos | September 27, 2010, 10:48
You’re a genius! Tried five different ways to get columns that had embedded jquery code in them, and yours was finally the one that worked! I had to throw in some extra ‘s for reasons I still can’t figure out, but twenty minutes of tinkering got it working. Thank you. (You can check it out at http://www.carbonlighthouse.org/carbon-calculator).

Posted by brenden | September 28, 2010, 03:54
@brenden: You’re welcome! And you were right in going for two columns: makes for a more professional-looking page.

Posted by Panos | September 28, 2010, 13:00
Panos,

What should the normal px spacing between paragraphs be for the Fusion theme?

Thank you so much for your help. Because of your answers and the info I find here, I am finally able to get my blog looking normal after moving from blog spot.

Kathleen

Posted by Cooking in Mexico | October 14, 2010, 18:18
You’re welcome!

But I’m afraid I don’t understand your question – please explain.

Posted by Panos | October 14, 2010, 23:10
Sorry. Maybe I don’t understand what I am asking…

I’m using your code at the top of this page that specifies 14 px.for padding between paragraphs. I know I can change the number, but I don’t know how to measure px. How much space (px?) should there be between paragraphs for Fusion theme? When I use 14, it is too much. I’m playing around with it, decreasing in increments, but I wonder what is correct for Fusion.

Thank you,

Kathleen

Posted by Cooking in Mexico | October 14, 2010, 23:37
Ah I see.

a) 1px (pixel) is the smallest you can have in a webpage or a digital image: as an example, the borders around my code specimens are 1px thick.

b) The numbers in those specimens are arbitrary examples.

c) The codes for padding etc. are useful if for some reason you need more space than the default for paragraph breaks, for instance to separate a section or a chapter from another. It’s completely up to you: there’s no “correct”, and no “correct for Fusion”. You can link to an example and I can tell you if I think it looks ok, but it will just be my opinion and nothing more than that.

Posted by Panos | October 15, 2010, 00:00
Great!. If the spacing looks good to me, that’s good enough to go with.

Thank you,

Kathleen

Posted by Cooking in Mexico | October 15, 2010, 00:14
is there any code for 3 row x 3 columns, all 9 cells r having diffrerent background colors ?

Posted by श्रेया | October 29, 2010, 09:19
Of course. The basic form of a 3×3 table is this:

<table>
<tr><td>CONTENTa1</td><td>CONTENTa2</td><td>CONTENTa3</td></tr>
<tr><td>CONTENTb1</td><td>CONTENTb2</td><td>CONTENTb3</td></tr>
<tr><td>CONTENTc1</td><td>CONTENTc2</td><td>CONTENTc3</td></tr>
</table>

For different bg colors, turn all of these:

<td>

to this:

<td style="background-color:#HEX;">

(HEX being the color code you need in each case.)

You may need further improvements (padding, text color, border color – can’t tell before I see the actual thing).

Posted by Panos | October 29, 2010, 12:22
thanx a lot. it worked…. [link to post]

now what could be the solution to change the text color, making it bold/underline/italics etc.

Posted by श्रेया | October 31, 2010, 15:29
You’re welcome. The link links to a private blog so I can’t see it.

For the changes you want, see “Formatting Text” pts 4 & 5 in my left sidebar.

Posted by Panos | October 31, 2010, 17:47
o.k. thanxs a lot

Posted by श्रेया | November 1, 2010, 12:17
How do I effectively use the coding for an RSS feed widget that pulls in article titles based on category tag? As you can see here: http://cyclewriteblog.wordpress.com/ , it’s pretty annoying that Misty Look template, the widget squashes all the citations together.

Posted by Jean | November 21, 2010, 19:20
I’m afraid you can’t change the way it looks unless you buy the CSS Upgrade.

Your other option is a text widget: can be styled anyway you like, but you’ll have to update it manually.

Posted by Panos | November 21, 2010, 22:40
Thx for your response.

Posted by Jean | November 22, 2010, 04:18
You’re welcome – sorry it’s not the one you would have preferred!

Posted by Panos | November 22, 2010, 10:38
Hi Panos, thanks for the code!

I have a query you might be able to help with.

Is it possible to place a line separator between two columns? What would I have to add to the code?

Thanks in advance!

Posted by Sam | December 7, 2010, 19:23
You’re welcome.
Of course it’s possible: you just need to add a right or left border to the left or right column, respectively. See here:
https://wpbtips.wordpress.com/2009/10/14/borders-pt-1/
Or link to the post or page in question so I can see which one of my suggestions you’re using and give a more precise answer.

Posted by Panos | December 7, 2010, 21:59
All I wanted was an extra line space ;-)

After trying p, span and div unsuccessfully (yes, I did see the tip, above) I landed here through the wp forums and have solved my problem. Thanks for this wealth of information!

Posted by shoreacres | January 9, 2011, 20:43
You’re welcome, shoreacres!

Posted by Panos | January 10, 2011, 14:43
merci pour tes partage de codes, avec 2 ou 3 je suis arrivé à faire kon puisse ecrire sur une image ou un fond, avec ton code 2 colonne j’ai transformé les %, ça fais ke la colonne de droite se met sur celle de gauche
merci pour cette grande connaissances tres utile
je voulais juste te signaler kon peut plus mettre de code gigya dans les commentaires, saurais tu pourquoi????
encore merci

Posted by Łα gєитιℓℓє яєвєℓℓє | January 20, 2011, 20:40
I’m having difficulty with WordPress adding extra space between lines of an unordered list, UL, every time it saves a draft. I close up the tags and WordPress puts them back in, adding blank lines where I don’t want them! I’m handy with CSS and HTML but this problem is aggravating. Isn’t there a setting that can be changed so WordPress doesn’t add blank lines and reads the HTML literally? Suggestions?

Posted by Pamela | January 21, 2011, 17:47
@LGR: You’re welcome. But my french is limited, and I’m not sure I understand your question: try in English very very please!

@Pamela: My blog is about wp.com blogs (as my tagline says) while yours is self-hosted – different software, different theme versions. But anyway link to a concrete example so I can see your HTML; or show me an example of the HTML you’re trying to use (paste it here using the sourcecode shortcode, or paste it here after you convert it in an Html converter*, or paste it in Textsnip* and give me the URL you’ll get).
* See Links 1 in my left sidebar.

Posted by Panos | January 21, 2011, 23:19
Hi again! My blog is hosted through Yahoo which has some sort of intricate relationship with WordPress so that it’s just like being at the “real” WordPress with a not-very-invasive front end.

I finally figured out a working solution to the line spacing issue with unordered lists. WordPress was doing awful things, reformatting every time it auto-saved, whether I liked it or not. The solution appears to be to style every LI element. Here’s a page with which I’m satisfied:
http://creativedubuque.com/blog/2009/06/10-tips-college/
Your blog is very helpful, and I will be back!

Posted by Pamela | January 22, 2011, 22:01
@Pamela:

Still, ‘your’ WordPress isn’t ‘our’ WordPress. For example, a plain unordered list in ‘our’ Twenty-Ten produces no space at all between list items, not blank lines.

But the point is that a plain list will adopt whatever the CSS of the theme dictates for lists. So you’re right, if you want absolute control over every detail re spacing etc, the only solution is adding style to your li tags.

Posted by Panos | January 22, 2011, 22:58
To whomever shared all this code (in brown above), THANK YOU!! You did a great job of simplifying how to create columns.

Posted by Susan Asher | January 25, 2011, 06:28
You’re welcome.

“Whomever” is me, and my blog exists for sharing and helping: I’m an experienced volunteer in the wp.com forum (specializing in HTML and a few other things), and this blog is a direct outcome of my involvement there.

Posted by Panos | January 25, 2011, 12:58
Hello. I’m using WP 3.04 and the Thesis theme (not sure if that detail matters or not). On my “product” pages, I’ve created a 75% width table that I want to center on the page.

I’ve found the to work well, but when I switch into the “Visual” mode and then back to HTML, WordPress auto-changes it back to just .

Is there a way to turn “OFF” this default in WP, or is there a better TAG that WP won’t change.

Thanks so much!

Posted by Todd Rawlings | January 28, 2011, 18:54
Sorry, I didn’t know this blog would drop my tag reference. Here it is again:

I’ve found the [DIV align=”center” tag] to work well, but when I switch to Visual view, WP changes it back to [DIV].

Help?

Posted by Todd Rawlings | January 28, 2011, 18:56
As my tagline says, my blog is about wp.com blogs while yours is self-hosted.: we don’t have he same software, and I can’t use the theme you’re using to test things. On the other hand, this is a general HTML question, so:

a) align=”center” is deprecated. You can try one of these instead:

<div class="aligncenter">
<div style="text-align:center">

b) Since you have a fixed-width main column, you could center a table without enclosing it in extra div tags – just by displacing it to the right:

<table style="[etc etc];margin-left:146px;">

c) But why on earth are you using table coding for normal one-column text?

Posted by Panos | January 29, 2011, 11:34
Panos,
Hey thanks, yes, I guess I didn’t check that closely what kind of WordPress environment you were supporting here, please pardon the mix-up.

I did want to get back to you and say that I did SOLVE my issue by implementing the following HTML change:

1. I removed the [div align=”center”] tag . . . which worked, but kept getting removed automatically by WP.

2. I replaced that with this table tag:
[table style=”text-align: left; width: 75%; margin: auto;”]

The key was that “margin: auto;” at the end.
And now everything works as I wanted and it doesn’t auto change my code when I switch to the “Visual” tab.

You asked why I would choose a table, well, it served multiple functions as I often had multiple images I needed to embed in the text – in one table row, thus I did actually have multiple columns. This design seemed easiest for a novice HTML person like me. :-)

PS: By chance, I think I also discovered why WordPress was auto-changing my code. [In “Settings : Writing” in the “Formatting” section, there is an option to “WordPress should correct invalidly nested XHTML automatically”. This was checked ON.

I suppose having it correct bad XHTML is good thing, but now I know where the auto-fixing was coming from.

Cheers and thank you for sharing your knowledge with the world!

-TR

Posted by Todd Rawlings | January 29, 2011, 23:56
You’re welcome!

No, the align=”center” isn’t removed because of that option: it’s removed because it’s deprecated and some themes don’t accept it.

That option corrects tags left unclosed. So yes, keep it on and you’ll never see your whole page turn bold or your sidebar at the bottom.

You’re right, for a row of images you need a table; but you can use a table for that row of images alone – no need to include the rest of the text.

Posted by Panos | January 30, 2011, 02:54
Thank you, this was incredibly clear, concise, and helpful!

Posted by Becca | March 9, 2011, 22:21
You’re welcome and thanks, Becca!

Posted by Panos | March 10, 2011, 12:01
I’m trying to do two columns in a post and have text above and below the two columns. I am using the table solution but the columns aren’t spaced evenly on the page like if you use the div tags. Is there a way to set a percentage of space each column uses within the table?

Posted by Kathy | May 11, 2011, 18:22
Yes of course, but I need a link to the blog in question.

Posted by Panos | May 12, 2011, 12:36
Hi, pressing return in visual editor isn’t giving me any space between lines.
What am I doing wrong?

Posted by Anonymous | June 24, 2011, 10:18
Hi,
Assuming you’re talking about a wp.COM blog, make sure the Format tool (row 2 button 1) is set to Paragraph.

Posted by Panos | June 24, 2011, 18:58
Thank you. Big help!

Posted by Nina Amelia | July 11, 2011, 19:23
@Nina Amelia: You’re welcome!

Posted by Panos | July 13, 2011, 11:15
Wow. Thanks so much for the two column text layout solution.
Very elegant and does not rely on editing PHP or CSS code. Will work in any theme.
It looks like three of four columns are possible with this method plus doing a custom rail.
kudos
Forrest

[Username link to commercial site removed – P.]

Posted by Forrest Molstad | July 29, 2011, 20:51
THANK YOU FOR THE TWO COLUMN CODING!!!

Posted by Anonymous | August 5, 2011, 23:56
Well, you’re welcome!

Posted by Panos | August 7, 2011, 15:23
Thanks for the help. I really needed it. I haven’t used HTML in ages and I couldn’t remember how to add blank lines. You are a lifesaver!

Posted by Makeup Dr. Shari | September 4, 2011, 10:14
You’re welcome Shari!

Posted by Panos | September 5, 2011, 03:14
Thank you! I have been battling for the past 3 days with a page break that I cannot get to work, I used your columns format instead, and finally I have peace :-), not to mention a page that works.

[Username link to non wp.com site removed – P.]

Posted by Abigail | September 6, 2011, 05:09
What’s the page in question?

Posted by Panos | September 6, 2011, 16:16
Hello, I have a site under construction and the body of each page is in 2 columns: text on left and graphics, etc on right. I was editing text in the left column on one of the pages and somehow inadvertently made the graphic shift to the left now in between two paragraphs of text. I don’t know how this has happened. What can I do to rectify it?
I would welcome your expert advice, please!
Thank you
Clive Sherlock

Posted by clive sherlock | October 4, 2011, 17:43
Hi,
But your blog is set to private: can’t help if I can’t see the problem!

Posted by Panos | October 5, 2011, 01:00
How would you set it up for two columns and multiple rows using div tags? It seems not to line up that well side by side.

Posted by Anonymous | October 25, 2011, 22:45
Depends on the content. Can’t answer that without a link to a post with the problem in question.

Posted by Panos | October 26, 2011, 15:03