12

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!

2 Answers 2

20

Try float: none; :

.photos img{
  display: inline;
  vertical-align: top;
  float: none;
}
1
  • No problem, Mohammad. I'm glad it helped. :) Commented Jun 10, 2010 at 0:36
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! ;)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.