using css's width instead of element's width neutralizes float: left

I've a bunch of images which are placed next to each other, to ser开发者_JAVA技巧ve as a slider content, so called sprites I believe. Images are forced next to eachother by float: left. This works all fine when I do

<img src=".." width="200px" height="160px".

However when I put the width and height inside the style attribute:

style="{width:239px; height:160px;}"

The images outside the screen are put below each other. The float: left is specified in a separate style sheet. I would really like to use the style way, and I'm a kind of curious why the float left is canceled.

style="width:239px; height:160px;"

Remove curly brackets (braces) {}

style="{width:239px; height:160px;}"

This is invalid HTML. You don't use curly brackets within inline style= declarations, so this should work:

style="width:239px; height:160px;"

If it works with your first code snippet, it should work with this:

<img src=".." style="width:239px; height:160px;" />

Note that I removed your curly brackets.

In any case, I'm not sure where the "float neutralization" was coming from.

Even with the curly brackets, it's still floated in this demo in IE7/IE8 + Firefox/Chrome/Safari/Opera:

http://jsfiddle.net/thirtydot/8S9gM/

As pointed out various other times in this question, make sure you're specifying the correct width.

You shouldn't use inline styles, it is a bad practice, put all your rules in the external style sheet.

It is easier to maintain and allows you to update groups of items more quickly.

Also, the width attribute on the inline style is 239px not 200px and remove the curly braces.

As long as you have specified the class correctly there should be no reason for the float to have been cancelled.