aligning text with image

chinedu · Jul 26, 2004

Perhaps, some html guru can help me with this.
Then again, this is probably simple but what I am trying to is combine text with an image and align them correctly.

here is an example of an alignment that I am talking about:

test
tesdt tedt
tedt tedt
edt image test

I don't want to do this with a table and this is where the difficulty is coming for me.

Please see my sample below.
This code gets the text on left and image in middle.
What I am struggling to do is add the following and align them to right of image:

Debbie Green
Acting Supervisor.

Here is my code and any help is appreciated.

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="white" link="#696969" vlink="#a9a9a9">
<div align="left">
<table border="0" cellpadding="10" cellspacing="0" hspace=0 vspace=0 width="430">
<tr>
<td>
<div align="top">
<img height="150" width="124" src="testImage.bmp" valign="top" align="right">
              <p><b>Department of Public Works</b><br>141 Pryor Street, S.W., Suite 6001<br>St Louise, Mo 70303<br>Telephone: (899) 230-7486<br>Fax: (899) 284-8978
</div>
</td>
</tr>
</table>
</div>

</body>

WartookMan · Jul 26, 2004

I'm not sure if this is what you are after... but it might be a bit closer:

Code:

<style type="text/css">
.left {
	font-family: verdana, arial, helvetica;
	float: left;
}
.left img {
	margin-left: 20px;
	margin-right: 20px;
}
.right {
	float: left;
	text-align: right;
}

</style>
<span class="left">
	This is the left text with the text<br>
	left aligned. You can add<br>
	anything you like<br>
	well, almost anything.
</span>
<span class="left">
	<img height="150" width="124" src="testImage.bmp">
</span>
<span class="right">
	<b>Department of Public Works</b><br>
	141 Pryor Street, S.W., Suite 6001<br>
	St Louise, Mo 70303<br>
	Telephone: (899) 230-7486<br>
	Fax: (899) 284-8978.
</span>

You can either set the third span class to "left" or "right" depending on the justification of the text required.

Pete.

Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lwwcm.com/

e: Pete.Raleigh(at)lclimited.co.uk

chinedu · Jul 26, 2004

hi Pete!
Thank you so very much.
It is soooooo close to what I am looking for.

The only difference is that I wanted the text be aligned at the bottom.

In other words, I want the text on both sides of the image to line up at bottom with image while is stands out taller.

Right now, image is same height as both text.

Not sure if I am explaining it well.
Please advise.

You have gotten it closer than I have all day.

WartookMan · Jul 26, 2004

Try the following:

Code:

<style type="text/css">
.left {
	font-family: verdana;
	font-size: 12px;
	text-align: left;
	vertical-align: bottom;
	width: 250px;
}
.middle {
	font-family: verdana;
	font-size: 12px;
	margin-left: 20px;
	margin-right: 20px;
	text-align: middle;
	vertical-align: bottom;
}
.right {
	font-family: verdana;
	font-size: 12px;
	text-align: right;
	vertical-align: bottom;
	width: 250px;
}
</style>

<span class="left">
    This is the left text with the text<br>
    left aligned. You can add<br>
    anything you like<br>
    well, almost anything.
</span>
<span class="middle">
    <img height="150" width="124" src="testImage.bmp">
</span>
<span class="right">
    <b>Department of Public Works</b><br>
    141 Pryor Street, S.W., Suite 6001<br>
    St Louise, Mo 70303<br>
    Telephone: (899) 230-7486<br>
    Fax: (899) 284-8978.
</span>

You may have to play with the widths to avoid wrapping from occurring, but it should give you the idea.

Hope this helps.

Pete.

Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lwwcm.com/

e: Pete.Raleigh(at)lclimited.co.uk

chinedu · Jul 27, 2004

Thank you very much for all your help.

It works well based on the way you did it.

The only problem I have now, and it has nothing to do with what you did is I am streaming the what you did (the text on left, the image in middle and text on right) to a word document.
And it looks good until it is streamed to work document; then it re-alligns itself badly.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

aligning text with image

chinedu

Technical User

WartookMan

Technical User

chinedu

Technical User

WartookMan

Technical User

chinedu

Technical User

Similar threads

Part and Inventory Search

Sponsor