How to align images on right and left like margins with text in the middle
I am having a lot of trouble aligning the images how I want them. I want the images to be down the right and left side with the text in the middle. When I insert images, my text is split all over the place and all out of whack. I’ve tried doing text first, images first, both together and nothing is working.
The blog I need help with is momfog.wordpress.com.
Please see here so you understand how image alignment an image wrapping ar achieved > image alignment > http://en.support.wordpress.com/images/image-alignment/
This probably is not going to be possible except by using a three-column HTML table.
Are you writing your posts directly into the visual editor? Or are you using some word-processing program to write your posts?
It looks like you have a lot of code that is messing up the formatting:
<div><strong></strong><strong> </strong></p> <div><strong></strong></div> <p><strong></p> <div class="mceTemp">' unnecessary code above <code><div id="attachment_1328" class="wp-caption alignright" style="width: 160px"><a href="http://momfog.files.wordpress.com/2011/03/azaleas-in-savannah-11.jpg"><img class="size-thumbnail wp-image-1328" title="Azaleas in Savannah 1" src="http://momfog.files.wordpress.com/2011/03/azaleas-in-savannah-11.jpg?w=150&h=112" alt="" width="150" height="112" /></a><p class="wp-caption-text">Close-up of Red Azaleas</p></div></code> no need for </p>
more unnecessary code above
<div id="attachment_1323" class="wp-caption alignleft" style="width: 160px"><a href="http://momfog.files.wordpress.com/2011/03/azaleas-in-savannah-1.jpg"><img class="size-thumbnail wp-image-1323" title="Azaleas in Savannah 1" src="http://momfog.files.wordpress.com/2011/03/azaleas-in-savannah-1.jpg?w=150&h=112" alt="" width="150" height="112" /></a><p class="wp-caption-text">Early azaleas on a fence in my neighborhood</p></div>
no need for </p>
</div> <div><strong></strong></div> <p><strong></strong> </p> <p><strong></p>
more unnecessary code above
<div class=”mceTemp”>Daily Foglifter: When General Sherman marched through Savannah during the Civil War, he was so impressed by her beauty that he sent a telegraph to President Lincoln, offering Savannah to him as a Christmas present.</div>
<p> </p> <p></strong> </p> <p></strong> </p> <div class="mceTemp">
more unnecessary code above
I’m sitting here looking out the window basking in the splendor of the a perfect day. Spring has sprung in <a title="My St. Patrick’s Day In Savannah" href="http://momfog.wordpress.com/2011/03/18/my-st-patricks-day-in-savannah/">Savannah</a> and it’s a beautiful time of year. The temperature is in the 80′s, the days are longer, and the aroma of blooming flowers permeates the air. The <a class="zem_slink" title="Azalea" rel="wikipedia" href="http://en.wikipedia.org/wiki/Azalea">azaleas</a> are in blossom and the roadsides, fences, and lawns of Savannah are saturated in pinks, reds, and whites. It’s truly a stunning sight to behold. </div>
I use a Mac, so LiveWriter is not an option for me. But I believe it might help you format the tables you should be using to make posts exactly as you want them to be.
Fudge ducks: too early for me to be online! But you can see how the extra code can mess things up?
In defence of Momfrog, I’ve often found a lot of the extra code ends up in posts and it doesn’t get there by the user entering it, I can assure you of that!
I hate to think how much time I’ve spent on my posts removing code that has been kindly added in by “the system”, leaving white space where I don’t want it and all sorts of other visual affects.
I do use the WP editor, so it is not coming from any external system in my case (i.e. it is not coming from a cut & paste or import operation).
I was not making any sort of accusation: The visual editor itself can be a snippy temperamental bit of technology! I know!
But many times, newcomers do post from Word, or the web, or somewhere. That is why I asked.
thesacredpath is probably right: she needs to learn a tiny bit about table coding if she wants to have images to the right and left of text. At the very least, one should be able to look at html and understand what code is extra.
If she is willing to learn a bit of html for tables, then many of us volunteers could explain how to do it. But I do understand that not everyone is interested in doing that…
Do you have an example of a problem with aligning images?
LOL – Sorry – I didn’t mean to imply you were making accusations! Just MomFrog and I had been discussing her layout over in Off Topic, so I sort of feel a bit responsible as it was I who suggested she try different stuff with her pics.
As for an example myself – probably not right at the moment, as I fixed most of mine that I can recall. I’m one of these pedantic people that likes all my paragraphs justified, but sometimes have a picture on the left of the opening paragraph. I would end up those div codes everywhere! Drove me batty! I’d go to the HTML tab and delete all the code that had been added in.
I have to say I haven’t had the problem for a while. I have changed themes, and removed the typekit font I was using, but I’m not sure either of those things had anything to do with it. I had a feeling it was more about key stroke sequence – as in which bit (text or pic) was aligned/formatted first.
I never really got to the bottom of it, sadly. I think I just got better at it and that prevented all the extra code miraculously appearing!
Changed it again. It’s not exactly like I want but it’ll do.
I don’t paste from word. All writing is done in the text editor.
I’d be interested in learning html, if I had the time. Unfortunately, I don’t (5 kids and writing a blog is all I can handle at the moment). :) Thanks for all the help! I’m only sorry I don’t know what to do with it!
I think some of the quirks of the visual editor might be related to the fact that we all wp.com folk use a common platform, some themes have CSS that does things one does stuff one might not want, and maybe gremlins.
Justifying text could well play with the software.
As I said, many of us volunteers could explain how to use html tables, if you like.
The topic ‘How to align images on right and left like margins with text in the middle’ is closed to new replies.