The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> float img with text flush left
pfortier
post Mar 2 2012, 01:02 PM
Post #1





Group: Members
Posts: 2
Joined: 2-March 12
Member No.: 16,619



I wanted several rows of the following: image to the left of text that displays on the right of the image and under when beyond image (i.e text floats around image).

I tried:

<table>
<tr><td><img valign=top align=left src=img.png>My text</td></tr>
<tr><td><img valign=top align=left src=img.png>My text</td></tr>
</table>

This code displays properly but printing from chrome and IExplorer is rendered badly where rows overlap (i.e. image and text sometimes overlap). However, older versions of IExplorer (version 6) renders this properly.

So I tried instead.

<p><img valign=top align=left src=img.png>My text</p>
<p><img valign=top align=left src=img.png>My text</p>

This code prints exactly what has been displayed but the problem is that the next image is not flush left on the page when the text to the right of the previous image was not long enough to continue below the image. In this case the next image starts to the right of the previous image.

I've tried many options but found no solution yet.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 2 2012, 05:37 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



It sounds like you need to clear the float in the second example. Please see the FAQ entry How do I align an image to the right (or left)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pfortier
post Apr 6 2012, 09:46 AM
Post #3





Group: Members
Posts: 2
Joined: 2-March 12
Member No.: 16,619



QUOTE(Darin McGrew @ Mar 2 2012, 05:37 PM) *

It sounds like you need to clear the float in the second example. Please see the FAQ entry How do I align an image to the right (or left)?

Thanks.
The problem was solved by the following:

<p style='float:left;'><img valign=top align=left src=img.png>My text</p>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:25 AM