Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
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 />. –  mac9416 Aug 24 '10 at 11:29
add comment

2 Answers

up vote 3 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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