Image Alignment Question

Discussion in 'HTML & Website Design' started by finqoo, Feb 5, 2009.

  1. #1
    Hi,

    I have a relativelt simple question but I have no idea how to do it. Hope you can help.

    Please see the example below to get an idea of what I am trying to do


    Image TEXT TEXT TEXT Image


    I want 2 images either side of some text (it's for a header). Problem is, the way I am doing it it's going like this

    Image TEXT TEXT TEXT
    Image

    Notice the 2nd image has dropped below the text.

    What is the best way to do this?
     
    finqoo, Feb 5, 2009 IP
  2. stall022

    stall022 Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    I'm not sure if it's the most correct way, but how about using a table with 5 columns?
     
    stall022, Feb 5, 2009 IP
  3. shssta

    shssta Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    yea easiest way to do that would be to have a seperate table cell for each segment
     
    shssta, Feb 5, 2009 IP
  4. finqoo

    finqoo Well-Known Member

    Messages:
    319
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    105
    #4
    Thanks, I didn't really want to do it this way because it was messing with my wordpress theme. In the ned, I couldn't think of a better way so I made a table and split it into 3.

    You can see the results in the header here http://www.london-2012-olympics.net
     
    finqoo, Feb 5, 2009 IP
  5. shssta

    shssta Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    looks pretty good
     
    shssta, Feb 6, 2009 IP
  6. IcoN512

    IcoN512 Peon

    Messages:
    57
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    [div style="float:left"]image[/div][div style="float:left"]test[/div][div style="float:left"]image[/div]
     
    IcoN512, Feb 6, 2009 IP
  7. IcoN512

    IcoN512 Peon

    Messages:
    57
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Oops, replace the [ ] signs with < >
     
    IcoN512, Feb 6, 2009 IP
  8. nhc1987

    nhc1987 Notable Member

    Messages:
    2,674
    Likes Received:
    240
    Best Answers:
    0
    Trophy Points:
    280
    #8
    Get rid of table! Use float instead
     
    nhc1987, Feb 6, 2009 IP
  9. Sparaker

    Sparaker Peon

    Messages:
    204
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    you could simply place the float property on the image alone too. e.g you would place it on the last image which comes wrapped down to the next line.
     
    Sparaker, Feb 6, 2009 IP