Putting text and a picture side-by-side in blog posts

This article is about lining up text and pictures side-by-side in your posts - and about how to add a "break" so that some text goes beside a picture and some goes underneath it.

The post editor's picture menu:

When you have put a picture into a post  in Blogger, (either using the Insert-picture option on the toolbar, or by adding the HTML for it some other way), the Post Editor gives you options for picture size, and for aligning the picture to the left, right or centre. 

You cab see these options by clicking on the picture.  This opens a "mini-menu" under the picture, like this:

This one mini-menu has options for:

Size	Options are small, medium, large, extra-large, and original-size
Alignment:	Options are left, right and centre (default is center)
Caption:	Add caption, and Remove
Properties:	Where you can add the hover-title and alternative-text for the picture
Remove:	Taking the photo totally out of the post

The alignment options:

When you first add a picture, the alignment is set to "center".

Choosing Left or Right moves puts the picture to the far side of the post and, if the picture isn't as wide as the window it's being displayed in, the text that was after the picture fills up the space on the other side - like this:

Stopping all the text from flowing around the picture:

Often bloggers want to have pictures left or right aligned, and to have some words showing beside the picture.

But they also want to control what text is shown beside the picture, and what text doesn't start until underneath it.   Many people spend a long time putting extra lines into their posts, so that the text and pictures are set up in a way that's "just right" - and then they're disappointed when they publish the post and their hard work is all lost, because the screen is wider and more text fits into the area beside the picture.

Luckily, this is very easy to do, by editing editing the HTML behind the post:.

1    Put some place-holder or "marker text" exactly where you want the flowing-text to stop.

Use text like BREAK HERE  or  XXXXX  - in short, any words that won't be anywhere else in the post.

I've made it bold and with a yellow background to make it show up in the picture - but I don't recommend that you do this, because it makes it harder to find and replace exactly the correct text later on.


2  Choose the HTML option (top left of the post-editor screen.


3  Find the place-holder text
(hint:  use your browser's search function - in Firefox, it's Edit > Find)


4  Replace the place-holder text with this code:

<div class="separator" style="clear: both;"> </div>

(The important thing about this code is that it re-sets the previous float instructions, which may have been to the left or two the right., by saying clear: both;)


5  Choose the Compose tab  (to get back to the regular post-editor screen).  The text after where the marker text was is now underneath the picture - and it will be there when you publish the post, too, no matter what size of screen your reader has.

Troubleshooting

Aligning more than one picture

The approach described here if you are only working with one picture.   But if you have two or more pictures, instead of letting the text flow it is best to put some of it into a <div> statement that is positioned to sit beside the pictures.

See putting several pictures alongside each other for details about this approach.

Extra blank lines:

At the bottom-left of the post-editor, there is a link for Post-Options.  Clicking this opens an options panel, where you can choose what effect line-breaks (ie pressing the "enter" key) have.   I always put it on "Use <br /> tags", so that I can put extra empty lines into the HTML to make it easier to read.   If it's on "Press Enter for line breaks", then each extra line put into the HTML will also show up in the Compose-mode view, and in the final post.

---

Related Articles:

Stopping pictures on your blog from being "clickable"

Getting the HTML code to put a picture into your blog

Putting pictures side-by-side in your blog

Telling Google about the pictures in your blog

Inserting a picture into a blog post