How to Align and float images with CSS #PassiveIncomeWebsiteDesign

[Admin]

The easiest way is to just hire me of course, but this is a good article on wrapping test around images so I thought I'd share.  internet business development expert SEO specialist, Local SEO specialist, sales-psychology expert, author and dual certified teacher J. Richard Kirkham B.Sc. computerhelp808@gmail.com


How to Align and float images with CSS
Written by James Richardson

In this tutorial:  Left, Center, Right Align  Floating images using CSS
Images can be incorporated into your website in various ways. They can be aligned and floated to allow the images to be placed in particular location in the page. How you want to display the images will determine whether you will align or float the image.

Aligned images do not wrap text around them. Aligning images will only position the image left, right, or center with the text following before and after the image. Aligning leaves quite a bit of white space on your site. You will see the white space when you go though the aligning section.

A floated image will allow the text to wrap around the image like a regular book or newspaper would do. Images can also be floated so they appear horizontally on your site. This is good for displaying images like a gallery. The following sections will explain how to float and align images using CSS.

Left, center, and right align

Images can be aligned left, right, and center using the div tag and an inline CSS style. Text DOES NOT wrap around images that are simply aligned. The following explains how to align your images left, right, and center using CSS.

Left Align

The line of code below is for aligning an image to the left.

<div style="text-align: left"><img src="/support/image/your-image.png" width="100" /></div>
Image Sample 1

Center Align

The following line of code is for centering an image.

<div style="text-align: center"><img src="/support/image/your-image.png" width="100" /></div>
Image Sample 2

Right Align

The folowing line of code contains the CSS attribute for aligning right.

<div style="text-align: right"><img src="/support/image/your-image.png" width="100" /></div>
Image Sample 3

Floating images using CSS

Floating images allows images to horizontally align with each other and allows text to wrap around the image. The following will explain horizontally aligning images and floating images around text.

Floating images left to wrap text

<img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" />
Image Sample 4Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci. Vivamus at dolor a nibh aliquet luctus. Duis imperdiet mi id lorem pellentesque tempus. Ut quis felis posuere tellus feugiat ultrices. Praesent id tortor non tellus viverra placerat. Vivamus euismod nisi a leo interdum molestie ornare tellus consectetur.

Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Proin faucibus convallis elit. Maecenas rhoncus arcu at arcu. Proin libero. Proin adipiscing. In quis lorem vitae elit consectetuer pretium. Nullam ligula urna, adipiscing nec, iaculis ut, elementum non, turpis. Fusce pulvinar.

Important! Floated images will overlap each other if the float is not cleared. Make sure you are placing a clear float code after each section your image is floating in. Below is the code to clear your floats.

<br style="clear:both" />
Here is an example:
<p><img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" />
Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.
<br style="clear: both;" /></p>
 

Floating images right to wrap text

<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />
Image Sample 5Pellentesque mattis tincidunt porttitor. Maecenas condimentum iaculis ligula, sit amet scelerisque nibh aliquam in. Quisque ornare gravida est ut fermentum. Nam venenatis pretium enim, in laoreet nibh tristique sit amet.

Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Aenean sed turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem eros, ornare ut, commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, ornare et, nonummy in, elit. Donec interdum feugiat leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat ullamcorper ipsum.

Floating images left horizontally

This will use the same code as before (See below). The images are simply placed one after another to get them to float horizontally.

<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />
Image Sample 6Image Sample 7Image Sample 8Image Sample 9

Floating images inline with each other is a nice way to display your images as a Gallery. This concludes How to Align and float images with CSS. Join our community now to receive specialized help with HTML and design, special offers, and cool gear. In the next tutorial, we will show you how to make a simple CSS Drop Down Menu. We also have a helpful article on External, Internal, and Inline CSS styles

Source http://www.inmotionhosting.com/support/edu/website-design/insert-images-website/align-float-images-css