...

View Full Version : Text and image in line



sAuhsoj
07-12-2011, 05:33 PM
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.
<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??:confused:
Thanks in advance.

abduraooft
07-12-2011, 05:49 PM
<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?

sAuhsoj
07-12-2011, 05:57 PM
Here's the actual page http://dl.dropbox.com/u/7803192/bambi4%20-%20test/Gest_updated.html the image is the big blue 'G'
Dimensions: 64x64

abduraooft
07-12-2011, 06:09 PM
Try
<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>

sAuhsoj
07-12-2011, 06:11 PM
ah wonderful. any reason why this works? Why could the <img> not come after?

abduraooft
07-12-2011, 06:26 PM
That's how the float works. If you need to keep your original markup intact, you'd need something like

<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">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum