Learn to Align Your Photos with HTML Floating

This month, we’ve been posting ways you can become the master of the images on your blog. We started by Demystifying Image Code and then showed you how to Space Photos with Padding last week. This week we’re focusing on a new skill: floating.

What is floating? Floating is used to push images right or left. An image will float as far left or right as it can, depending on which you define. Subsequent elements, such as other photos or text, will wrap next to the floated element. For example, if you float an image to the left, the text will then wrap to the right of the image. You can see a good example of this in my March Reads post. The images of the books are floated to the left, so the following text wraps around the floated book image to the right until the image has ended, when the text resumes across the entire column space again. The small ads on my sidebar are also floated, which is how I get two separate images side by side!

Now let’s learn how to float images with code!

You can float an images to the left or to the right. Here are the floating properties that allow you to define which sides of the element you’d like to pad:

  • float:left | Floats an image to the left margin and subsequent elements are added to the right side
  • float:right | Floats an image to the right margin and subsequent elements are added to the left side

Floating is a style attribute of an image, so it will go after the part of the code “img.” The correct code notation is: img style=”float:left;”

An example of image code with the image floating to the left:

<a href="http://www.flickr.com/photos/
nerdnest/8678621815/" title="Eliza's tarts! 
by Nerd Nest, on Flickr"><img style="float:left;" 
src="http://farm9.staticflickr.com/8117/867862181
5_18748b5c81_t.jpg" width="100" height="100" 
alt="Eliza's tarts!"></a>

How do I get space between my floated images or the image and floated text? To add space between floated elements, Learn to Space Photos with Padding. Floating and padding are two peas in a pod. Without padding, text or photos next to floated images will be touching, which looks very squished together. One can be used without the other: I use padding between my large ad images without floating, and I sometimes float two portrait images side by side in a blog post without adding padding. However, these two coding techniques complement each other very well.

Also, both padding and floating are image style attributes. As such, both are going to go in the same area in your code!

Here’s an example of code with both floating and padding:

<a href="http://www.flickr.com/photos/
nerdnest/8678621815/" title="Eliza's tarts! 
by Nerd Nest, on Flickr"><img style="float:left;
 padding-right:5px;" src="http://
farm9.staticflickr.com/8117/
8678621815_18748b5c81_t.jpg" width="100" 
height="100" alt="Eliza's tarts!"></a>

I’ve added in floating code, but my elements still aren’t side by side. You may need to make the width of your images smaller! An element will only float next to a floated element if there’s enough horizontal space. For example, my main blog column is currently about 525 pixels. If I have two images that have a combined width exceeding 525 pixels, they won’t both fit! Remember that you have to consider padding too!

Eliza's tarts!

Eliza is teaching me how to make fortune tellers.

Coffee date with this dude.

Breakfast + waiting for the bus.

Morel risotto!

The peas are comin'!

Protecting our tomato plants from the coming frost: glass bottle with hot hot water next to plant + old towel tent (I wrapped up the open part after I took this picture). #gardening

Check out this bat hat!

18 year old Jake and I, Jack Johnson, and Mike Birbiglia: photos for my #FoldItIn album

Getting water for the garden.

Can I float more than one line of elements? Certainly! Just add the floating code to each image. This way, you can create a visual table of elements. This would be a great way to create a table of Instagram images as I did with the two rows of Instagrams above. You can also learn to create a table with code, which requires you to define each row in the table. With floated images, you don’t have to figure out ahead of time how many images will fit into each row. When an image doesn’t fit a row, it will float down to the next row! This is especially useful if you have a table you add to frequently, such as on a page with images linking to available posts on a specific blog topic. You can just add the newest image to the top and everything else will shuffle accordingly!

If you have any questions about floating or need more explanation, ask away in the comments section!


Want to learn more coding and tech tricks for blogging? Check out these posts:

What blogging code tricks would you love to learn?