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

to it. So you can see that formatting images for display with CSS is easy and powerful.

For more foregrounding options, see my CSS for Developers course here on the lynda.com

online training library.