Float image to left or right using CSS
Article ID: KB101713
Introduction
In HTML, the align attribute is used to align images to the
left or right side of a page, allowing text to wrap around the image. However, the
align attribute has been deprecated and can no longer be used
if you want an XHTML-compliant site.
Expression Web, which creates XHTML-compliant code, will allow you to align
images to the left or right of a page, but will use an inline style to create code that
"floats" the image to the left or right instead. You can see the
difference in the HTML code below:
HTML uses the align attribute:
<img src="image.jpg" align="right">
XHTML uses an inline style:
<img src="image.jpg" style="float: right" />
While you can insert similar inline styles by hard-coding in the HTML in FrontPage or Dreamweaver,
it is more efficient to create a custom class in your stylesheet that you can reuse
throughout the site. Creating a custom class also gives you additional control over
how much space should be between the image and the text content that wraps around.
How to create custom classes for image alignment
First, you will need to have an external stylesheet linked or imported into your pages.
Open the external stylesheet for editing.
Add the following code to the stylesheet:
.floatleft { float: left; margin: 0px 5px 5px 0px; }
.floatright { float: right; margin: 0px 0px 5px 5px; }
Save the stylesheet.
On your HTML pages, you can now apply the .floatleft or
.floatright class to your images to align them to the left or the
right of the content area. After applying the class, your HTML code will look
like this:
<img src="image.jpg" class="floatleft" />
Customizing the classes
You can customize the space that is between the image and the wrapped text
by modifying the margin amounts. The CSS code for defining the margins looks like
this:
margin: top right bottom left;
Modify the top, right, bottom, and left pixel values to define how much space
you want between the image and text. For example, in the .floatright class,
the code above puts a left and bottom margin of 5 pixels around the image. This
way the image will line up flush against the right side of the content area, but
have some space to the left and below it so that the text doesn't touch the image.
Authors and Contributors:
Corrie Haffly
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1015/kb101713.htm
permalink to this article:
http://www.pixelmill.com/support/kb101713.htm
Back to top