inline float image not floating

**benbob** · Aug 12, 2012 08:36

Help! I know I'm overlooking something stupid, but can't see it.

I want to float a simle, smallish gif on the left hand side of the text in a very simple xhtml page.

This is the whole paragraph.

---------------------------------------------------------------------------------------------------------------
<p>Emergency waterleak repairs in southeast London is one of the key services I deliver, seven days a week if need be. A lot of people think this is something that
will only happen in winter during long periods of severe frost. I can assure you that is not at all the case, and have included a list of some of the most frequently
found reasons for a problem of this kind to pop up. Some of these are utterly obvious, or at least will be when you think about it; others are not. And when it
happens and you can not control it, this simple, clean water that we all take for granted can cause an enormous amount of grief. <img {float:right} src="GSR GIF 100.gif" width="100" height="100" alt="water leak repairs Gas Safe Registger logo"/> </p>
------------------------------------------------------------------------------------------------

The purpose of this exercise, is to leaf all css alone and manipulate am image inline.
When I remove the {float:right} the image displays fine exactly where I put it.
When I add {float:right} I get a dispaly error pointing at the first curly bracket.

Experimented with id, class and various syntaxis, but nada.

Starting to pull my hair out, which I can not afford as there isn't that much left.

Many thanks for any solutions that will allow me to float an image inline.

**TechnoBear** · Aug 12, 2012 09:05

{float:right} is CSS notation, so you can't add it into an HTML tag. Give your img a class then reference it in your style sheet. e.g.

Code:

.classname {float:right;}

**TechnoBear** · Aug 12, 2012 09:42

Sorry - I've just re-read your post and realised you specifically wanted to put the declaration inline. Assuming you understand why that's generally a really bad idea, you can do it with <img style="float:right;" src="GSR GIF 100.gif" width="100" height="100" alt="water leak repairs Gas Safe Registger logo"/>

**benbob** · Aug 12, 2012 12:27

Muchas gracias senhor Bear.

**dresden_phoenix** · Aug 12, 2012 17:38

When you want to add CSS inline to a tag you use the style attribute of the tag.
eg

Code:

<p style='your css rules here>text </p>

As TB was saying this is not the optimal way of using CSS tho.

ALSO NOTE: FLOATED ELEMENTS must be placed FIRST in the source code. The way you have it the image will float.. but bellow all the text in the paragraph ( maybe that's what you intended, tho ).

Code:

<p><img style='float:right'  src="GSR GIF 100.gif" width="100" height="100" alt="water leak repairs Gas Safe Registger logo"/> Emergency waterleak repairs in southeast London is one of the key services I deliver, seven days a week if need be. A lot of people think this is something that
will only happen in winter during long periods of severe frost. I can assure you that is not at all the case, and have included a list of some of the most frequently
found reasons for a problem of this kind to pop up. Some of these are utterly obvious, or at least will be when you think about it; others are not. And when it
happens and you can not control it, this simple, clean water that we all take for granted can cause an enormous amount of grief. </p>

**benbob** · Aug 13, 2012 00:03

Thanks DF, I know using css inline is not ideal, I use it as a temp to see what it looks like and then adjust size, position and whatever until I am happy that it looks ok in various browsers. When I am satisfied with the compromise, I add the result to the style sheet.
There is a lot of experimenting to do, as I am completely rewriting my site from a very clumsy "as long as it displays, I am happy" html4-loose and all inline, to xhtml-strict with as much css as practicable. One could say this is a bit of a lurning curve; I have zero formal training and learned everything I know through reading forum threads, asking questions from time to time, doing online courses and reading library books. The Sitepoint members have been instrumental with their advice.

**Stomme poes** · Aug 14, 2012 06:12

You can also experiment in-browser using the built-in (or add-on) plugins for debugging. Chrome comes with the Chrome web developer, and IE also comes with one. Opera comes with Dragonfly though I have trouble manipulating the panel there (lack of familiarity mostly). You can download Firebug for Firefox. I'm sure Safari has something too but I can't afford a special computer just to run that browser :)

When you open the debugger you can actually type in CSS on elements and see the changes live.

Muchas gracias senhor Bear.

senhorA even