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

• 

  singularityuniverse · Member · Jun 12, 2012 at 5:54 pm

  • Copy link
  • Add topic to favorites

  Hi,

  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 http://singularityuniverse.me/universe/ just with using enter button, but I have absolutely no idea how!:D

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

  .alignleft,
  img.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
  }
  .alignright,
  img.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
  }
  .aligncenter,
  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:)

  Martin

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Jun 12, 2012 at 6:30 pm

  • Copy link

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

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

  (Or you can use coding for tables.)

• 

  singularityuniverse · Member · Jun 12, 2012 at 7:20 pm

  • Copy link

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

• 

  justpi · Member · Jun 12, 2012 at 7:29 pm

  • Copy link

  You’re welcome!

• 

  singularityuniverse · Member · Jun 12, 2012 at 8:01 pm

  • Copy link

  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.

  Namely:

  <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

  http://singularityuniverse.me/2012/05/31/batman-arkham-asylum/

  Thanks!:)

• 

  justpi · Member · Jun 13, 2012 at 2:23 pm

  • Copy link

  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">
  
  <tr>
  <td style="padding:0;">IMAGE1 CODE HERE</td><td>TEXT1 HERE</td>
  </tr>
  
  <tr>
  <td style="padding:0;">IMAGE2 CODE HERE</td><td>TEXT2 HERE</td>
  </tr>
  
  ETC ETC FOR THE REST OF THE IMAGE/TEXT PAIRS
  
  </table>

• 

  singularityuniverse · Member · Jun 13, 2012 at 2:57 pm

  • Copy link

  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!

• 

  singularityuniverse · Member · Jun 13, 2012 at 8:04 pm

  • Copy link

  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!