Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Text and image in line

    I don't know how I am struggling with this but apparently I am. I want to display a piece of text inline with an image and have them vertically aligned. However, I am somehow finding this difficult. This is the HTML.
    Code:
    <div style="position: relative; margin:0; padding:0; width:800px; display:inline; ">
    Gest allows you to use mouse gestures with Windows Explorer. To perform a mouse gestures hold down the right mouse button and move it. The ways in which you move the mouse before you release the button determines what action Gest will perform. 
    </div>
    <img src="myimage.png" style="display:inline; position: relative; float: right; vertical-align: middle;">
    Why is this not working??
    Thanks in advance.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <img src="myimage.png"
    What are the dimension of that image? Is there any width set to the container of the two elements? Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the actual page http://dl.dropbox.com/u/7803192/bamb...t_updated.html the image is the big blue 'G'
    Dimensions: 64x64

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    <div>
    <img src="http://dl.dropbox.com/u/7803192/bambi4/Gest/Gest.png" style=" float: right;">
    
    Gest allows you to use mouse gestures with Windows Explorer. To perform a mouse gestures hold down the right mouse button and move it. The ways in which you move the mouse before you release the button determines what action Gest will perform. 
    </div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah wonderful. any reason why this works? Why could the <img> not come after?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    That's how the float works. If you need to keep your original markup intact, you'd need something like
    Code:
    <div style="float: left; width: 860px;">
    
    Gest allows you to use mouse gestures with Windows Explorer. To perform a mouse gestures hold down the right mouse button and move it. The ways in which you move the mouse before you release the button determines what action Gest will perform. 
    </div>
    <img src="http://dl.dropbox.com/u/7803192/bambi4/Gest/Gest.png">
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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