Images on the left, text next to them on the right

  • Author
  • #914869


    I still can’t figure out how to do this:D

    What I want is an image on the left and a text description next to the image on the right.

    I actually managed to do just that on just with using enter button, but I have absolutely no idea how!:D

    Then I tried applying the following code to the custom css:

    img.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
    img.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
    img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    p {
    clear: both;

    But that works only half way. I get images vertically lined up on the left side but it’s somewhat impossible to position text next to them.

    Please help:)


    The blog I need help with is



    You just need some coding in the HTML editor of the post or page. For each image/text pair you need this:

    <p style="margin-top:90px;">TEXT HERE</p>
    <br style="clear:both;">

    (Or you can use coding for tables.)


    Thanks Panos, that worked out perfectly! You saved me again, mate!:)



    You’re welcome!


    Panos, if you would be so kind, I used the code and everything seems to work great but when I hit Preview Changes, parts of the code get deleted for some reason.


    <br style=”clear:both;”>

    When I Update the site, it seems to stay there. However, is there something I could do about positioning of the text?

    Please, take a look at this to know what I mean




    1) Same thing happens if you switch from HTML to Visual. That’s WP’s fault: the editor tends to think no-content elements are wrong and removes them. Personally I never use previewing: I set the post to private, visit the actual blog page to check it, continue editing, turn to public once I’m done.

    2) The clear:both command cancels the wrap-around effect. It would stay put if you added it to the img tag instead of the br tg. But my original suggestion was based on the content I saw when I first replied (single line texts). Since the text I’m seeing now vary in size, better use a table:

    <table style="background:transparent;">
    <col width="150">
    <td style="padding:0;">IMAGE1 CODE HERE</td><td>TEXT1 HERE</td>
    <td style="padding:0;">IMAGE2 CODE HERE</td><td>TEXT2 HERE</td>


    Thank you very much, sir! Your knowledge truly is astonishing.

    Yes, that was an error on my part, sorry about that. For a few lines, it works great as you suggested before:)

    Will try this one as soon as I get a chance!

    Cheers, mate!


    Oh yeah, hell yeah!

    Works perfectly!

    I had some troubles at first with the TEXT1 HERE until I figured that I had to put code AND text in not just simple text :D

    Thanks Panos, I owe you one!

The topic ‘Images on the left, text next to them on the right’ is closed to new replies.