I'm trying to get text to wrap around an image. I put in: <img src="picture.gif" align="right"> then add my text, but it only seems to allow one line of text, then everything else drops beneath the image. I've looked at various sites and they all say that this is how it's done. Does anyone els have a suggestion?
Thanks
[B]<p><img src="picture.gif" style="float:right">[/B]then add my text, but it only seems to allow one line of text, then everything else drops beneath the image. I've looked at various sites and they all say that this is how it's done. Does anyone els have a suggestion?[B]</p>[/B]I don't know if this is what you are looking for, but I always use tables to wrap text around images. Makes it very easy to align too.
Let me know if this works for you, goodluck!
<HTML>
<HEAD>
<TITLE>wrapping text around image</TITLE>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD colspan=3>** text goes here **</TD>
</TR>
<TR>
<TD>** text goes here **</TD>
<TD>** image goes here</TD>
<TD>** text goes here **</TD>
</TR>
<TR>
<TD colspan=3>** text goes here **</TD>
</TR>
</TABLE>
</BODY>
</HTML>[B]<p><img src="picture.gif" style="float:right">[/B]then add my text, but it only seems to allow one line of text, then everything else drops beneath the image. I've looked at various sites and they all say that this is how it's done. Does anyone els have a suggestion?[B]</p>[/B]
Should be very easy. Just move the <p> BEHIND the image specification.
<img height='100' height='100' alt='alt text' style='float:right'>works as expected with the sizes specified
Note: with the <img> inside the <p> element, only the text of that <p> will wrap around the image. (examples assuming elements are not styled elsewhere )
<div><p><img height='100' height='100' alt='alt text' style='float:right'>this text will wrap around the image</p>
<p>this text will not</p>
</div>
<div><img height='100' height='100' alt='alt text' style='float:right'><p>this text will wrap around the image</p>
<p>this text will wrap around the image</p>
<p>this text will wrap around the image</p>why do you suggest using " height='100' height='100' " when <p><img src="picture.gif" style="float:right">then add my text,... , will be more generic and will work for all sizes of a given image?
Should be very easy. Just move the <p> BEHIND the image specification.
That was my answer to cab_driver, and there is nothing wrong with that code, yet in rare cases when the image has (contectually) nothing to do with the text content, your suggestion will be better siuted, but thanks anyway.
why do you suggest using "
height='100' height='100'" when<p><img src="picture.gif" style="float:right">then add my text,..., will be more generic and will work for all sizes of a given image?
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).http://www.w3schools.com/tags/att_img_width.asp
'work' is such a subjective description,
html & xhtml get more strict with each iteration,
'work correctly' is better,
'work correctly tomorrow' is better still
a "generic" page would likely load the image from a database in which the src alt width and height are stored in table columns <img <?php echo $sqlqueryresultcontaining_src_alt_width_height ?> />
You are twisting the issue...
Your statement was: <img height='100' height='100' alt='alt text' style='float:right'> "works as expected with the sizes specified"
Meaning, it will not work without size specs.
But that's missinformal and untrue since <p><img src="picture.gif" style="float:right">...</p> will work perfectly and -especially as expected!
I'm a coder, not a sourcerer. And I was not in possition to pressume that his image is 100x100px of size as you did - so what if your code enforces his f.i: 170x90px to get stretched and squeezed sametime.
This is the reason why I didn't give myself a luxury to specify the hight and width of an image I never saw before, and especially not when dealing with: how to make text wrap arund image without dropping all other lines under it and especially, and because alt='' height='' width='' or any other attributes are a part of his duty and their values out of my knowlledge and precognition abilities.
Tip: It is a good practice to specify both the height and width attributes for an image only when you know its dimensions and absolutely sure that the source image will be available. Otherwise, if these attributes are set, the space required for the image is reserved and when the page is loaded your paragraphs will render unequal and without a visual clue of a missing image that will make your page look ugly. However, without these attributes, the browser does not know the size of the image, and will not reserve blank unnecessary space for it. The effect will be that the page layout will not change during loading nor after it has loaded and the client will never know that the page is not finished.
www.schoolsOfCodingExperience.com
But in all other cases and when certain - I strongly recommend to pecify image dimensions because of at least one minor benefit, which is: the content will not be forced to reflow if loaded before the browser gets image dimensions.
But an independently floating element - when present - will allways happen to make a part or the whole document content reflow at least once. Therefore I strongly advise to float only elements that are part of some imediate block-level element container as in my given example.
Regards, and thank you very much for your shed light and insight on this matter.
Is this tinny problem solved, or should we continue giving other solutions that will not work, on top of the working one?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.