• 0

[HTML][WordPress] Table alignment problems


Question

I am trying to make a page on my WordPress blog to display book recommendations. I want a picture of the book on the left w/my short review on the right. I wrote the following HTML to do that:

<table>
<tr>
	<td>
		<a href="http://marginofsafetyblog.com/wp-content/uploads/2010/08/stockmarketgenius.jpg"><img class="alignnone size-full wp-image-96" title="stockmarketgenius" src="https://marginofsafetyblog.com/wp-content/uploads/2010/08/stockmarketgenius.jpg" alt="" width="100" height="160" /></a>
	</td>
	<td>
		<a href="http://www.amazon.com/gp/product/0684840073?ie=UTF8&tag=marofsafblo-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0684840073">You Can Be a Stock Market Genius by Joel Greenblatt</a><img src="https://www.assoc-amazon.com/e/ir?t=marofsafblo-20&l=as2&o=1&a=0684840073" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
		Although the title is a little off-putting, this book is an excellent primer on investing in special situations. It provides an overview and case studies of merger securities, spinoffs, recapitalizations, and bankruptcies. It is an easy read and the methods explained are backed up by Greenblatt's amazing decade-long performance. 
	</td>
</tr>
</table>

When I copy and paste this into the HTML editor and then switch to WP's Visual editor, the table looks just as I want it with the text on the right. However, when I publish the page it turns out differently. I have tried <td valign="middle"> for the description, but it did not work. Any ideas?

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Tables.... ack!

Anyhow, I can't get to your website right now because of my stupid

work filter. But if your site is not showing up the way you think it should,

it might be the background code of your theme coming into play.

Link to comment
Share on other sites

  • 0

wordpress has a habit of adding <p> tags around everything even when using the html editor. that could be the problem looking at your html.

Link to comment
Share on other sites

  • 0

 &lt;div class="review"&gt;
            &lt;div class="cover"&gt;&lt;a href="http://marginofsafetyblog.com/wp-content/uploads/2010/08/stockmarketgenius.jpg"&gt;&lt;img class="book alignnone size-full wp-image-96" title="stockmarketgenius" src="https://marginofsafetyblog.com/wp-content/uploads/2010/08/stockmarketgenius.jpg" alt="" width="100" height="160" /&gt;&lt;/a&gt;

      &lt;div class="book"&gt;
&lt;h3&gt;&lt;a href="http://www.amazon.com/gp/product/0684840073?ie=UTF8&amp;tag=marofsafblo-20&amp;linkCode=as2&amp;camp=1789&amp;
creative=9325&amp;creativeASIN=0684840073"&gt;You Can Be a Stock Market Genius by Joel Greenblatt&lt;/a&gt;&lt;/3&gt; &lt;img src="https://www.assoc-amazon.com/e/ir?t=marofsafblo-20&amp;l=as2&amp;o=1&amp;a=0684840073" width="1" height="1" border="0" alt=""  /&gt;
                &lt;p&gt;Although the title is a little off-putting, this book is an excellent primer on investing in special situations. It provides an overview and case studies of merger securities, spinoffs, recapitalizations, and bankruptcies. It is an easy read and the methods explained are backed up by Greenblatt's amazing decade-long performance.&lt;/p&gt;
        &lt;/div&gt;
&lt;/div&gt;

.review {
   width: ###px;
}
      .cover { 
           width: 100px;
           float: left;
           margin: 0 0 0 10px;
      }
      .book {
          width: 400px /* Change this to the width you need */
          float: right;
      }

Don't forget to clear the float: http://www.positioniseverything.net/easyclearing.html

Otherwise if this is going to be a once in awhile thing:

Remove the tables and just apply a 'left' float class to the image instead.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.