The HTML image tag is normally an inline element, but sometimes we want to float text around
an image. Here is how this is done. Let's start by making a working copy of images.html
and I am going to name this images-working.html and open it in my text editor. Here you see
just a simple HTML file. It's got an image and it's got some paragraphs with some Lorem
Ipsum in them, and if we open this in a browser, you will see that it looks like that. The
image is standing by itself, but that's not because it's a block level element. It's not.
It's an inline level element, but it just doesn't have any text around it. It's here
separate from the text in the paragraph. So the paragraph actually begins after it which
is why it displays the way that it does on the screen. Now if I want this text to flow
around the image, there is a couple of different ways that I can do this. In old HTML4 and
earlier this was done with an align attribute. I would say align="left" like that, and I
could put this back on the line there if I like, but of course HTML ignores all of that
whitespace that doesn't actually matter. And if I save this and reload in the browser,
you'll see that now the text flows around the image. There is no margin between them.
It's not very attractive, but this is how it used to be done and there are other attributes
to put some space between them, and it was all a little bit cumbersome and didn't work
very well. Now this still works and you're certainly allowed to do it this way. All the
modern browsers support legacy code, but there is a correct way to do it, and technically
in HTML5, the align attribute is obsolete and instead we will use a stylesheet. So I
am just going to put a style right here in the HTML for this tag and I am going to say
float: left, like that. When I save that and reload it in the browser, you see it accomplishes
exactly the same thing. And if I like, I can say float: right, and reload, and now it floats
off to the right. But because the paragraph is flushed left, I am going to leave it on
the left so that we can see this ugly border right here, and we can see that that's not
working very well. I am going to show you what we can do with this. Again using CSS,
this becomes very easy. I can say margin-right: 10px and I can say margin-bottom: 5px, and
when we load this up in the browser, we see now we have a nice little margin around the
image. I can even put a little border around it. I can say border: solid black 1px, and
give it a padding of 2 pixels so there is a little space between the border and the
image, and when I reload it, now we have a rather attractive looking image with a nice
little border around it and a good amount of margin around it as well. So you can easily
do a lot of things to make this image look good. It's worth noting that any time you
add a float, either with the align attribute or with the float property in CSS, that the
image actually converts to being a block level element. So now it is block level. It is no
longer inline. Of course this is a lot of stuff to type and if you are going to type
this much, you are going to want to be able to reuse it, so I am going to go ahead and
copy this and I am going to come up here and I am going to create a style, and I am going
to call this style float-img. I am going to put a dot in front of it to make it a class
and I'll take all that stuff that I copied and I am just going to--and now we have a
nice class for this float image and I can come down here and I can take all of this
and I can just say class="float-img" like that, and confirm that that's what I named
it and save this and reload it in the browser, and you see that it looks exactly the same.
Now if I want to, I can make it float right, and there it is, and if I want to, I can come
down here and I can take all of this and I can copy it, and have another image, say this
one will be paper, picture of paper, and I can say "Running with this is recommended",
and we come over here and load it in the browser. Well notice it's not quite exactly right.
We now have two of them and one of them is to the left of it and the wrapping around
isn't right. That's because they're both floating right, and the way to fix this and we are
going to talk about this a little bit more later, but we can say clear: right and then
each one of these floats will start on a line by itself, and so now it's doing exactly what
it is that we meant for it to do, and I can change this margin-right to margin-left so
that that looks better, and now it's floating right and it's got a nice little margin next