1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I align an image and wrap text bottom right?

Discussion in 'HTML & Website Design' started by jr777, Nov 1, 2017.

  1. #1
    If you look at https://www.germanglish.org/pages/about/ I'm trying to get the second image (lego girl) to align at the bottom right, with text wrapping around it.

    Here's my code so far. I just can't figure out how to get it to move to the bottom.
    SEMrush
    <img src="/images/about2.jpg" alt="Pretzl Girl" width="200px" style="float:right">
     
    jr777, Nov 1, 2017 IP
    SEMrush
  2. SoftLink

    SoftLink Greenhorn

    Messages:
    27
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #2
    Add padding-top:??vh to the floating div.
    That 'usually' works. If not, add margin-top:??vh to it.
     
    SoftLink, Nov 2, 2017 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,370
    Likes Received:
    339
    Best Answers:
    26
    Trophy Points:
    335
    #3
    Like this?
    
    <!-- move the pic from where it is -->
    <p style="font-size:25px; color:blue">
    Was hei├čt eigentlich "Germanglish?"
    <img src="/images/about2.jpg" alt="Pretzl Girl" style="float:right" width="200px">
    </p>
    Code (markup):
    Not necessarily the best solution, but it works given the starting point.

    BTW, those style attributes belong in the style sheet, not in the html.

    gary
     
    Last edited: Nov 2, 2017
    kk5st, Nov 2, 2017 IP
  4. coolweb

    coolweb Notable Member

    Messages:
    3,882
    Likes Received:
    426
    Best Answers:
    0
    Trophy Points:
    230
    #4
    Here is the solution:

    By using this code you can align the image to right and text will wrap around it.

    <img src="/images/about2.jpg" alt="Pretzl Girl" style="float:right; margin-left:15px;" width="200px">
    <p>and your text goes here</p>
     
    coolweb, Nov 3, 2017 IP