How to Align Images in Blog Posts Using Float | CSS For Bloggers: Part 4. - The Link Medic

One of the most simple and effective ways to add some flavor to your blog posts is adding images. Almost everyone uses at least one image in each blog post to create some visual interest. It also provides a nice thumbnail for when it gets shared on Facebook or a related posts section.

So how do we easily add these images and align them so that they can quickly be placed either on the right or left and wrap around your text? We can do this with CSS of course! As you can see my lovely header image to the left fits in nice and snug with this text wrapping around it. In fact this is so easy you'll be able to start using it immediately and want to fill your posts up with all kinds of nice stock photos.

First Things First...

Before we get into what CSS we add I want to make sure you at least know some of the basics of how to add the CSS to your blog's style sheet. In Part 1 we learned the basics of where the style goes and how to test out this tutorial on your own without effecting your blog in any way. Check that out first if you're unclear on what CSS is to begin with.

Adding Some Class to Your Posts.

If you've done any amount of research on CSS you may have heard the term 'float' being used. Float is simply a property that allows you to move elements and images to either edge of the page and have the text wrap around it. It's a great tool to know for any aspiring CSS designer to understand early on.

The best way to float images in posts is to create two classes in your style sheet. The reason for this is that classes are used for pin point control, if we added the float property to the img tag selector in your style sheet, it would float every image displayed on your blog. Therefore we must create one class for the right and one for the left. So let's do this now!

The CSS:

.floatright { float: right; margin: 0 0 8px 8px;}

.floatleft { float: left; margin: 0 8px 8px 0;}

The HTML:

The Breakdown:
We made a class and every element we apply that class with float to the right or left. In this case we added the class to the img tag. We can set the margin by setting the different values. Applying a higher margin will add greater space around the image, see Part 3 for more detailed information on using margins.

Floating Other Elements.

This little property known as float is not only used to move around images but you can also apply it to CSS elements. In fact this is how most blog layouts work, your sidebar is no doubt floated to the right or left. Floated elements are moved to the right or left of its containing element. This works just in the same way as above you can either apply the class to the element or enter the property directly into the declaration block of the element itself.

When floating a box element or any such block-level element CSS requires that you apply a width for the floated object. Floating images do not require a width to be set. This is simply best practices, knowing the width of a floated element is essential to know what other elements it's going to fit around and how much horizontal space you have to deal with.

CSS For Bloggers