Offset Table (image alignment)

• 

  libraryexample · Member · May 4, 2012 at 2:13 pm

  • Copy link
  • Add topic to favorites

  On any table I create with HTML, the image and text do not line up (image in first column, text in next column) and are staggered instead. In the visual editor, everything looks fine, but the page itself does not. I’ve tried adjusting the column widths but it doesn’t help. Any ideas?
  http://bmcipad.wordpress.com/app-review/be-a-teaching-genius/study-aids-and-reference/

  thanks!
  abigail

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

• 

  justpi · Member · May 5, 2012 at 3:58 am

  • Copy link

  If a table was needed, you’d need to turn all opening td tags to this:
  <td style="vertical-align:top;">

  (You’d also need to add some padding to the image or text cells, to create space between the image and the text.)

  But you don’t need a table at all in the post you linked to. All you need is left-aligned images, with the accompanying text right next to each image code, plus this after each image-text pair:
  <br style="clear:both;" />

• 

  libraryexample · Member · May 7, 2012 at 1:28 pm

  • Copy link

  Panos, you are the best!!!!!
  I only put it as a table because it looked *really* horrible otherwise- something with the theme default formatting I guess?
  Makes me kind of wish I actually knew what I was doing with this HTML stuff.

• 

  justpi · Member · May 7, 2012 at 4:19 pm

  • Copy link

  No, it wasn’t due to the theme. Setting the alignment of an image to left means that the rest of the content should wrap around; when the accompanying text is shorter than the image, it leaves some room next to the image, so the next image also wraps around, and you get a staggered arrangement. What the code snippet I suggested does is cancel the wrap-around effect.

• 

  libraryexample · Member · May 7, 2012 at 4:30 pm

  • Copy link

  Is there a way to get it to stop wrapping for the whole text portion- to get the text to stay in a defined column instead of aligning far left under the image when the text exceeds the height of the image? For an example http://bmcipad.wordpress.com/app-review/be-a-teaching-genius/classroom-management/ (look at Banckle)

• 

  libraryexample · Member · May 7, 2012 at 4:35 pm

  • Copy link

  Also, each time I make adjustments to the page, that code snippet gets cleared off- any idea how to keep it there?

• 

  justpi · Member · May 7, 2012 at 5:21 pm

  • Copy link

  a) If that’s what you prefer, then you do need a table…

  b) That’s WP’s fault. You can use this alternative:
  <p style="clear:both;">IMAGE CODE HERE THEN FIRST PARAGRAPH OF ACCOMPANYING TEXT</p>

• 

  libraryexample · Member · May 8, 2012 at 3:25 pm

  • Copy link

  It still disappears about 20% of the time (especially the closing tags) but a lot better than before. Thanks again!