Results 1 to 4 of 4

Thread: Img/p alignment and wrapping - possible?

  1. #1
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Img/p alignment and wrapping - possible?

    HTML - preferable (image is outside of p tag)
    Code:
    <p>Monocrystalline, polycrystalline and amorphous solar panels with without frames, for 12V battery charging.</p><img src="images/thumbs/rigid panel mini.jpg" width="62" height="62" alt="Rigid solar panels" />
    HTML - acceptable (image is within p tag)
    Code:
    <p>Monocrystalline, polycrystalline and amorphous solar panels with without frames, for 12V battery charging.<img src="images/thumbs/rigid panel mini.jpg" width="62" height="62" alt="Rigid solar panels" /></p>
    I would like the image aligned right and the text to wrap around it.

    If I reverse the HTML and have the <img> before the <p> I can achieve the look I want with the following CSS.

    Code:
    img {
    	margin:0;
    	padding:0 0 0px 5px;
    	vertical-align:text-top;
    	float:right;
    }
    I'd prefer the text to come before the image in the HTML if possible.

    Any help gratefully received, thanks.

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    link available?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Put the image in the paragraph, but put it before the text.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    HTML Code:
    <div>
    <p>
    Monocrystalline, polycrystalline and amorphous solar panels with without frames, for 12V battery charging.
    <img src="images/thumbs/rigid panel mini.jpg" width="62" height="62" alt="Rigid solar panels" align="right">
    </p>
    </div>
    Add a container div to hold them, align the image left or right, the text will wrap itself.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •