WordPress.com

1. bhavenjani
   Member
   Jan 13, 2013, 6:12 PM

   My requirement is to place images side by side on a page/ post, and I've generally observed that WP layout is very unfriendly in doing so. I struggle in placing images side by side (similar to how they are on my home page at http://www.bhavenjani.com), its by lots of trial & error in resizing these images that I managed to get them how they currently are.

   Another greater problem on my Home page is in the formatting that follows these images. The text invariably ends up between the images rather than going below them, irrespective of entering carriage return. At the back-end of this page, I have entered the carriage return atleast a 100 times to get the space that exists below the image on my Home page.

   While the theme of my blog is Hatch, I've encountered this problem on various other themes too.

   Any help/ guidance on this would be appreciated.

   Thanks in advance.
   Bhaven

   The blog I need help with is bhavenjani.com.

2. timethief
   Member
   Jan 13, 2013, 6:18 PM

   The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. http://en.support.wordpress.com/visual-editor/#alignment They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that's centered without text on either side of it.

   If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

   • Align-left means position left, with the rest of the content wrapping around the right side of the image.
   • Align-right means position right, with the rest of the content wrapping around the left side of the image.
   • Align-center means position center, with no wrap-around (= the rest of the content below the image).

   Every theme has a maximum displayed image width http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/ so it's important to keep that in mind when posting multiple images side-by-side. If you want two images to be side by side on the same line start by setting the alignment of both images to left. To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
   <p style="clear:both;">TEXT HERE</p>

3. justpi
   Member
   Jan 13, 2013, 10:00 PM

   Correction: to prevent the text from ending up "between the images rather than going below them", you enclose the first paragraph of that text in this code:
   <p style="clear:both;">TEXT HERE</p>

4. bhavenjani
   Member
   Jan 14, 2013, 12:58 PM

   thanks timethief and justpi. this solved my problem.

   (Just a note though: Right now, the image on the left is left-aligned, and the one on the right is right-aligned, thats how I got the way the home page looks)

   However, is it possible to control the spacing between the images and the text that starts after it? After entering the above code, the text starts immediately after the image, what needs to be done if I want to control the spacing between the two?

5. justpi
   Member
   Jan 14, 2013, 1:26 PM

   You're welcome.
   Left or right doesn't make a difference: the command "clear:both;" cancels the wrap-around effect of left and right aligned images.
   To increase the distance, turn the code we suggested to this:
   <p style="clear:both;padding-top:12px;">TEXT HERE</p>
   Change the number to adjust.

   PS Above the correctly coded paragraph you've also pasted this:
   <p style="clear:both;">
   You need to delete that one.

Topic Closed

This topic has been closed to new replies.