Floating Images

Centering your image

As a rule centering an image looks better and it ought to be large enough to justify doing so. A tiny image in the center of the page looks a little…wrong? At least it is wastefull of real estate.

One wouldn’t really want to float larger images:

As can be seen, floating a large image has a poor visual and isn’t really wanted. While here one can perhaps barely get away with it, I have seen wider images with one word sentences beside it.

The code for doing all this is covered below.

Float or Align?

One could become confused when some tutorials have align left and some float left (or right). This is because, first the align attribute, and it’s associated hspace and vspace, has been depreciated and is no longer considered best practices. It is old style html and has been replaced with css. This is why we use class=“left”, right or center. Then the class is defined in the stylesheet.

Using the default HTML Buttons

click for full size

Here we have added to the default formatting buttons and renamed them for clients sites. Below the buttons in this screenshot is a tutorial I add for those who need it, including links to tutorials on bkdesign. Using an extension called MD Dulee Noted that adds a non-editable note field type for adding general weblog instructions.

Float an image Left With Text

The term “float” is an old one which means the text or other images will float to the left or right and pull the following content up beside it. Especially in the case of small images.

This is the natural flow of text if one simply adds an image and starts entering text immediately after it.

This is the natural flow of text if one simply adds an image and starts entering text under it using a new paragraph.

It’s nice to have the text to the left of smaller images as a small image just doesn’t look right sitting there all by itself. This image has float:left assigned to it

One can even start a new paragraph in the middle of the image, and if the text runs below it no harm is done and all looks as it should. Here we are floating the image left and setting a right and bottom margin to give some space.

In some cases one wants a series of images down the page with the text related to each image beside it and the next image and text separated.

In this case one has to clear the float between the text and the next image, because if you don’t…

Then what happns below this text and image is the result.

Oops! We forgot to clear the above.

Clearing Float’s

HTML:
<div class=“clear_left”></div>
CSS:
.clear_left {
clear: left
}

On clients sites I often use as a class .clearl and clearL on the HTML formatting button.
For right floats similar.

Right floats With Text

Same type of idea, the text flows to the left. One could alternate down the page but it may get a bit overdone after a while. The jury is out on that one as with medium images it can produce a nice alternating effect.

Above this image I have a clear right. This separates the images and text. This would look much better with larger images, more text, and one could use a page break, a line between.

Same type of idea, the text flows to the left. Above this image is clear left. One could alternate down the page but it may get a bit overdone after a while. The jury is out on that one as with medium images it can produce a nice alternating effect.

Code:

<div class=“right”><img src=“image code” />...</div> text after image
Tags have to have a closing tag or you will likely break your site..
.right {
float: right;
margin: 0 0 6px 8px;
}

<div class=“clearr”></div>
.clearr {
clear:right;
}

One can and it is preferable at times to use:
<img class=“right” src=“etc…
But in cases like the below where we want to add a caption or title we want it all wrapped with the div.

Floating Multiple Images Left

Creating a row of images uses the same principle, if they are all on the same line they will line up without a float:

...

Float an image with caption

Often we want a caption or titlee centered below our images.
But adding a caption or title and trying this:

Banff Armstrong Daggar Lake Earl’s Cove.

Not the best is it.

What is required is a div surrounding the images, and another inner div to clear the title and center it:

Banff

Armstrong

Daggar Lake

Earl’s Cove

The HTML

Note: CSS goes in css file

Formatted:
<div class=“articleimage”><img src=“http://www.bkdesign.ca/images/uploads/Banff2_thumb.jpg” width=“113” height=“75” alt=”” /> <div class=“imagetitle”>Banff</div> </div>

CSS

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

.imagetitle {
margin: 4px auto; text-align: center;
font-weight: bold;
font-size:90%;
color: #0E3645;
background: inherit;
}

Alternatives

If one almost always left aligns their images, it’s simpler to add a global
.content img {align:left}
to the css file. Here I added .content which is the name of my class before article text, using img left universally could have negative consequences for other areas such as sidebars and header images, so we restrict it to article area.

Exceptions can have a class of nofloat, eg: <img class=“nofloat” src=... and the css: .nofloat {float: none}
Often one can use inside the image code:
<img class=“left” src=...
This is fine and works. When the image is a link, Firefox ignores it. One has to put the class inside the link <a class=“left” href=’‘url’‘><img src=...