Forcing images to not wrap

Question

I can't touch the html theme but I have access to the css files.

<div class="photos">
    <img src="a.jpg" alt="" align="left" /> 
    <img src="b.jpg" alt="" align="left" />
    <img src="c.jpg" alt="" align="left" />  //align makes the images wrap
</div>

Unfortunately I can't remove align="left" from the images otherwise this CSS snippet would have done the job

.photos{
    white-space: nowrap;
}
.photos img{
    display: inline;
    vertical-align: top;
}

Any ideas? Is it even possible to make these images line-up horizontally without using the force of a table and only with CSS?
Many Thank in advance!

Answer 1

Try this:

.photos img{
    display: inline;
    vertical-align: top;
    clear: both; // clears the floating
}

You can check out more about the CSS clear property on W3Schools.

EDIT
Sorry I misread you. Thought you were trying to stack them. You're right to go with float: none, or clear: right that would also negate the float. I would probably go with both to play safe on IE's sometime crazy CSS assumptions! ;)

Answer 2

Try float: none; :

.photos img{
  display: inline;
  vertical-align: top;
  float: none;
}