What is the best method to get text to wrap around another element, such as a picture?Using the float (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#float">http://www.w3.org/TR/REC-CSS1#float</a><!-- m -->) property. Check the attachment for a simple example. 
That depends on whether you're wanting to strictly use CSS to lay pages out. Using the align attribute isn't against the HTML 4.01 Transitional doctype, but you would use float: left|right|none; in CSS (as mentioned above).
Problems with using float:
Netscape 4.x never got it remotely correct. If you are using a table-based site that does not use CSS to create the basic gridwork of the page, avoid floating anything in CSS. A table-based design assumes compatibility with 4.0 and older browsers. The float property in CSS is not compatible with that browser crowd.
Unless you write code to pop modern browsers into standards compliance mode, the affects of the float property can be frustrating and unpredictable enough to drive you to use <img align=...">. I'm talking about every developer's favorite browser; Microsoft Internet Explorer. MSIE has several bugs and quirks when floating objects on a page. IE 5.0 and 5.5/PC has its own set, IE 6.0/PC has its own set, and IE 5.x/Mac (both OS 9 and X) have their own sets of quirks.
The bottom line
Use the float property in CSS if you have a table-less design that requires style sheets to create the basic gridwork for the page.
Use <img align="left|right"> if you have a table-based site that you want compatible with 4.x and older browsers (those released 1998 and prior). Or stick the image inside a table and align the table.
More info on HTML 4.01 Loose (Transitional doctype):
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/loose.dtd">http://www.w3.org/TR/html401/loose.dtd</a><!-- m -->
float use:
In CSS:
<style type="text/css">
<!--
.leftImage {
float: left;
/* Use margin instead of padding to account
for IE5.x/PC's incorrect implimentation
of the CSS box model
*/
margin: .5em .5em .5em 0px;
}
-->
</style>
In HTML:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"picture.jpg" width="#" height="#" class="leftImage" alt="Description of picture">
You can still use the float property if you want compatibility with older browsers, it just requires a little CSS trickery.
Possible Workaround
Declare CSS 1.0 styles in an external style sheet imported via the <link> tag. Things like padding, borders, and margins. Then declare CSS 2.0 styles (and float) in another stylesheet imported via the @import method in the <style> tag.
<link> tag CSS file (stylesheet1.css) using the example above:
.leftImage {
/* Margin property is left out here because 4.x and older
browsers will use default styles for the <p> tag. The image
is placed inside a pair of <p> tags.
*/
text-align: center;
}
@import stylesheet (stylesheet2.css)
.leftImage {
float: left;
margin: .5em .5em .5em 0px;
text-align: left; /* Set text align back to default */
.leftImage span {
display: none;
}
In HTML:
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"url/to/stylesheet1.css">
<style type="text/css">
<!--
@import "url/to/stylesheet2.css";
-->
</style>
.
.
.
<p class="leftImage">
<span><a href=http://www.webdeveloper.com/forum/archive/index.php/"#read_more">Read more</a><br></span>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"..." . . . >
<span><br><a name="read_more"></a></span></p>
Netscape 4.x users will see a centered image in paragraph by itself. They will also see a link for Read More, which will take the user below the image when clicked. Meanwhile, 5.x and newer browser users will see the image floated left with a one-half em margin on the top, bottom, and right sides of the image. The Read More link will not be displayed.
That depends on whether you're wanting to strictly use CSS to lay pages out. Using the align attribute isn't against the HTML 4.01 Transitional doctype, but you would use float: left|right|none; in CSS (as mentioned above).Problems with using float:
Netscape 4.x never got it remotely correct. If you are using a table-based site that does not use CSS to create the basic gridwork of the page, avoid floating anything in CSS. A table-based design assumes compatibility with 4.0 and older browsers. The float property in CSS is not compatible with that browser crowd.
Unless you write code to pop modern browsers into standards compliance mode, the affects of the float property can be frustrating and unpredictable enough to drive you to use <img align=...">. I'm talking about every developer's favorite browser; Microsoft Internet Explorer. MSIE has several bugs and quirks when floating objects on a page. IE 5.0 and 5.5/PC has its own set, IE 6.0/PC has its own set, and IE 5.x/Mac (both OS 9 and X) have their own sets of quirks.
The bottom line
Use the float property in CSS if you have a table-less design that requires style sheets to create the basic gridwork for the page.
Use <img align="left|right"> if you have a table-based site that you want compatible with 4.x and older browsers (those released 1998 and prior). Or stick the image inside a table and align the table.
More info on HTML 4.01 Loose (Transitional doctype):
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/loose.dtd">http://www.w3.org/TR/html401/loose.dtd</a><!-- m -->
float use:
In CSS:
<style type="text/css">
<!--
.leftImage {
float: left;
/* Use margin instead of padding to account
for IE5.x/PC's incorrect implimentation
of the CSS box model
*/
margin: .5em .5em .5em 0px;
}
-->
</style>
In HTML:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"picture.jpg" width="#" height="#" class="leftImage" alt="Description of picture">
You can still use the float property if you want compatibility with older browsers, it just requires a little CSS trickery.
Possible Workaround
Declare CSS 1.0 styles in an external style sheet imported via the <link> tag. Things like padding, borders, and margins. Then declare CSS 2.0 styles (and float) in another stylesheet imported via the @import method in the <style> tag.
<link> tag CSS file (stylesheet1.css) using the example above:
.leftImage {
/* Margin property is left out here because 4.x and older
browsers will use default styles for the <p> tag. The image
is placed inside a pair of <p> tags.
*/
text-align: center;
}
@import stylesheet (stylesheet2.css)
.leftImage {
float: left;
margin: .5em .5em .5em 0px;
text-align: left; /* Set text align back to default */
.leftImage span {
display: none;
}
In HTML:
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"url/to/stylesheet1.css">
<style type="text/css">
<!--
@import "url/to/stylesheet2.css";
-->
</style>
.
.
.
<p class="leftImage">
<span><a href=http://www.webdeveloper.com/forum/archive/index.php/"#read_more">Read more</a><br></span>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"..." . . . >
<span><br><a name="read_more"></a></span></p>
Netscape 4.x users will see a centered image in paragraph by itself. They will also see a link for Read More, which will take the user below the image when clicked. Meanwhile, 5.x and newer browser users will see the image floated left with a one-half em margin on the top, bottom, and right sides of the image. The Read More link will not be displayed.