Deprecated in HTML5. Do not use.

<img align="">

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Attribute of
HTML Tags Guide To Adding Images To Your Web Documents
What does <img align=""> do?
Was previously used to specify the alignment and placement of an image relative to the surrounding text. It has been deprecated and should not be used.

Old Way to Wrap Text Around an Image

The old way of wrapping text around an image was to use the <img> attributes align="right" or align="left".

<!-- This may work in some browsers, but will break in others. -->

<img src="/wp-content/uploads/flamingo.jpg" align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit at sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit at sollicitudin.
<!-- This may work in some browsers, but will break in others. -->

<img src="/wp-content/uploads/flamingo.jpg" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit at sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit at sollicitudin.

This is no longer supported in HTML5. The correct way to do this now is to use CSS.

(Wondering where to find lorem ipsum like this? Check out our sister site Dummy Text.com)

Wrapping Around an Image with CSS

Wrapping text around an image with CSS is easy. You simply float the image to the left or the right, and apply appropriate margins so that the text doesn’t smash up next to the image.

img {
 display: block;
}

img.wrap {
 max-width: 70%;
 margin: 30px 0px;
}

img.align-right {
 float: right;
 margin-left: 30px;
}

img.align-left {
 float: left;
 margin-right: 30px;
}
<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Aenean egestas suscipit mi in fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Aenean egestas suscipit mi in fermentum. Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt tellus magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Vivamus id est metus. Donec hendrerit gravida ipsum, vitae pellentesque velit bibendum vitae. Praesent sit amet venenatis erat, vel pellentesque leo. Morbi nec nisi ultrices, vestibulum purus sed, rhoncus mauris. 

<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-right">
Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt tellus magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Donec sollicitudin, eros a venenatis malesuada, metus ante condimentum nisi, et viverra purus nisi in arcu. Donec congue est quis justo lacinia, et accumsan sapien ullamcorper. Mauris et odio ultricies nisi pellentesque aliquam. Curabitur massa eros, laoreet at dui eu, vehicula efficitur elit. Fusce imperdiet sit amet velit sed condimentum. Etiam nec augue lorem. In dignissim aliquet sem.

#wrap img {
display: block;
margin: 30px 0px;
}
#wrap img.wrap {
max-width: 70%;
}
#wrap img.align-right {
float: right;
margin-left: 30px;
}
#wrap img.align-left {
float: left;
margin-right: 30px;
}


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Aenean egestas suscipit mi in fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Aenean egestas suscipit mi in fermentum. Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt tellus magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Vivamus id est metus. Donec hendrerit gravida ipsum, vitae pellentesque velit bibendum vitae. Praesent sit amet venenatis erat, vel pellentesque leo. Morbi nec nisi ultrices, vestibulum purus sed, rhoncus mauris.


Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt tellus magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Donec sollicitudin, eros a venenatis malesuada, metus ante condimentum nisi, et viverra purus nisi in arcu. Donec congue est quis justo lacinia, et accumsan sapien ullamcorper. Mauris et odio ultricies nisi pellentesque aliquam. Curabitur massa eros, laoreet at dui eu, vehicula efficitur elit. Fusce imperdiet sit amet velit sed condimentum. Etiam nec augue lorem. In dignissim aliquet sem.

Note about Floats and Clearfix

When you apply a float CSS value to an element, something weird and unexpected happens. Its container element doesn’t recognize it as having any height. This can make it appear that the floated element is breaking out of its container.

You don’t notice this if the container matches the background. But if you put a border on it, it creates really annoying problems.


img { display: block; } img.wrap { max-width: 70%; margin: 30px 0px; } img.align-right { float: right; margin-left: 30px; } div.article-container { border: 5px solid red; margin: 5px; padding: 5px; }
<div class="article-container">
<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-right">
Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.
</div>

#bad-float img {
display: block;
}
#bad-float img.wrap {
max-width: 70%;
margin: 30px 0px;
}
#bad-float img.align-right {
float: right;
margin-left: 30px;
}
#bad-float div.article-container {
border: 5px solid red;
margin: 5px;
padding: 5px;
}

Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.

The solution to this problem is usually called a “Clearfix.” The solution is (essentially) a “hack,” but it has become the completely standard way of dealing with the problem.

The Clearfix is just an additional set of CSS rules added to the container element which cause it to recognize the full height of the inner element. This is usually added as a distinct CSS class:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

When added to the above example…


img { display: block; } img.wrap { max-width: 70%; margin: 30px 0px; } img.align-right { float: right; margin-left: 30px; } div.article-container { border: 5px solid red; margin: 5px; padding: 5px; } .clearfix:after { content: ""; display: table; clear: both; }
<div class="article-container clearfix">
<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-right">
Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.
</div>

#good-float img {
display: block;
}
#good-float img.wrap {
max-width: 70%;
margin: 30px 0px;
}
#good-float img.align-right {
float: right;
margin-left: 30px;
}
#good-float div.article-container {
border: 5px solid red;
margin: 5px;
padding: 5px;
}

Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.

Values of the align Attribute

Value NameNotes
rightThe “right” value of the align attribute placed the image to the right side of the containing element, allowing the text to flow on the left side of the image.
leftThe “left” value of the align attribute placed the image to the left side of the containing element, allowing the text to flow on the right side of the image.

All Attributes of img Element

Attribute nameValuesNotes
heightIdentifies the intrinsic height of an image file, in CSS pixels.
srcsetlist of sourcesDefines multiple sizes of the same image, allowing the browser to select the appropriate image source.
alignright
left
Was previously used to specify the alignment and placement of an image relative to the surrounding text. It has been deprecated and should not be used.
alttextDefines alternate text, which may be presented in place of the image.
borderpixelsPreviously used to define a border on an image element. It has been deprecated and should no longer be used.
controlsToggled media player controls when used in conjunction with the <code>dynsrc</code> attribute. Both attributes are now deprecated.
dynsrc
hspacePreviously used to add horizontal space on both side of an image. It is now deprecated.
ismapIdentifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will be included in the request.
longdescDefines a URL at which can be found more information about the image. It was written out of the HTML5 specification, but its status is not quite so clear as other deprecated features.
loopPreviously used to specify the number of times a video should play, when used in conjunction with the dynsource attribute. Both attributes have been deprecated.
lowsrcSpecified a smaller or lower-quality version of an image.
nameIdentified the image or provided additional information about it. Deprecated in HTML 4.0 in favor of other attributes.
naturalsizeflagThis attribute does nothing. It was once used by a proprietary software system.
nosaveWas intended to prevent users from downloading an image. Was never a part of the HTML specification, and not widely implemented.
startfileopen
mouseover
suppressUsed by the now-defunct Netscape browser to suppress the display of image prior to image download completion.
usemapSpecifies a client-side image map to be used with the image.
widthIndicates the intrinsic width of the image, in CSS pixels.
srcSpecifies the URL of an image to be displayed.
Adam is a technical writer who specializes in developer documentation and tutorials.