Create Images Styles to Align Images with the Float Option in CSS in Expression Web
The best way to align images to the left or right of a page so that text and other elements wrap around them on your pages, is to create CSS styles using floats.
1. First, place your cursor where you want to add the image in your page and choose Insert > Picture > From File.
Choose New Style from the Modify or Apply Styles task panes.
2. In the New Style dialog, create a class style, which requires a period at the beginning of the name. In this example, I named the new style ".image-right.
Open the Layout category set the Float to Right using the drop-down list.
3. Open the Box category and set the left and bottom margins to create a little space to the left and bottom of image so that there will be some space between the image and the surrounding text when the image is aligned to the right. In this example, I set the left and bottom margins to 10 px to create a 10 pixel margin around the image.
4. Click OK to save the style.
Click to select the image, open the Apply Styles task pane, and click on the style name "image-right" to apply it to the image. The image will automatically align to the right side of the page and the text will wrap around it to the left.
5. You may want to create a similar style to align images to the left. To do so, repeat the steps above, but set the float to left and add margin space to the right and bottom. Once you’ve created style to align images left and right, you can save them to an external style sheet and use them throughout your site.
Go on to Tip 6 | Return to Expression Web main page
