Shifting text closer to image

Hi,

I have all my text surrounding my image positioned where I want it except for one
piece. I'd like to know how to shift both lines of text which are to the right of the image
closer to the image (further left). Here's a link to the image & post:

http://www.hottestshoes.org/

So both lines which read:

Item Description:
Black Gucci Shoes

I need them shifted further left and closer to the image so there is less whitespace between them.
It would be ideal to have this text centered vertically across the image as well just like this:



Appreciate any advice

George

 

You need to move the DIV that holds the image & top/bottom titles first, add a float:left to that, and then have the <p> that holds those 2 lines of text, add float:left to that. And then the <p> that follows these two blocks needs to have a clear:both to remove the effects of floating.

Here is my modified markup:

<div id="post-73" class="post">
  
  <h2><a title="Permanent Link to Black Gucci Shoe" rel="bookmark" href="http://www.hottestshoes.org/black-gucci-shoes-2/">Black Gucci Shoe</a></h2>
  
  <!-- <small>Posted on Mar 13, 2012 under <a href="http://www.hottestshoes.org/category/uncategorized/" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> | <span class="commentslink">Comments are off</span> </small> -->

  <div style="width:400px; font-size:15px; font-weight:bold; text-align:center;">
    <h2>Black Gucci Shoes</h2>
  </div>
  
  <div style="float:left; width:400px; font-size:15px; font-weight:bold; text-align:center;"><a rel="nofollow" href="http://www.hottestshoes.org"><img width="400px" style="padding-bottom:0.1em;" title="black gucci shoes" alt="black gucci shoes" src="http://www.hottestshoes.org/images/gucci/black-gucci-shoes.jpg"></a><br>Black Gucci Shoes</div>
  
  <p style="float:left; margin:290px 0 0 10px;">Item Description:<br>Black Gucci Shoes</p>
  
  <p style="clear:both;"><i>Black Gucci Shoes</i> content Black Gucci Shoes<br>

  </p><p>authors<br>
    
  Full Text: journalTitle, archiveInfo</p>

</div>

HTML:

Note there are some invalid markup in your code, like incomplete style definitions. Be careful to clean them.

 

Hi,

That worked great! Thanks very much.

So one last question given that not all my images will be the same height

With this line: <p style="float:left; margin:290px 0 0 10px;">

How do I substitute the 290px part so it's not fixed and always positioned or vertically centered based on or relative to the different image heights?


Thanks Again!

George

 

you should remove all the inline styling and bang it in a stylesheet.