0

I want two images to appear side-by-side. However, WordPress inserts a line-break between the elements, even if I use the HTML editor rather than the Visual editor.

How can I make the editor trust that if I don't insert a line-break, I don't want it?

2
  • 1
    Can you post the code the editor outputs to the browser? Is this line break an actual <br /> tag or just unwanted whitespace? It could actually be a theme CSS issue, and not a WordPress editor issue ...
    – EAMann
    Aug 22 '10 at 14:34
  • It was an actual <br />. Aug 24 '10 at 11:29
3

To avoid the line break when posting 2 images side by side assign the alignleft or alignright class to them and put them on the same line in the editor without skipping any spaces between them.

Example:

<img src="/wp-content/uploads/your_image.jpg" alt="" class="alignleft" /><img src="/wp-content/uploads/your_image2.jpg" alt="" class="alignright" />

Edit I forgot to mention that content after the floated images will overflow between the images unless you clear the floats. I add: <div class="clear">&nbsp;</div> after the images and add .clear {clear:both;} to my css.

2

Along with what @Chris_O said, when you are in the editor for the pictures select Left on one and Right on the other. This applies the alignleft and alignright classes, respectively.

Your theme has to have the CSS classes defined, if you have one from vendor, they are more then likely there, but in case they aren't, just go into the theme editor and add them to the CSS:

.alignleft {float:left;}
.alignright {float:right;}

I also like to add something like this for the images I float, since the test might wrap around them;

img.alignleft, img.alignright {
padding: 5px;
display: inline;
}

Obviously you can add margin or changing the padding to suite your taste.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.