What's wrong with this code?

[Robert_R]

<div style="clear:both;">
<img src="images\robrtliv.jpg" height="200" width="184" alt="Robert relaxing" style="float:right;">
<img src="images\danliv.jpg" height="200" width="184" alt="Daniel relaxing" style="float:right;">
</div>

I'd like both pics on the right side. One on top of the other.

For example

Pic1
Pic2

Thank you very much!

[toicontien]

Floating any element does a couple things:

1) It removes it from the block-level element flow, meaning it doesn't take up space in what ever block-level element contains it. That DIV has a zero pixel height because both images are floated. But line elements, like text, <span>, <b>, <em>, etc. - and any other tag with display: inline; as one of its style rules, will flow around the edges of floated elements.

2) All floated elements become block-level by default, even floating a <span> tag makes it a block element.

3) Floated elements exist side-by-side unless there isn't enough room or the clear property is applied.

What you really want to do is not float the images, just align the text in that DIV to the right. The <img> tag is inline by default and reacts to the text-align: property.

Do you want text to flow around the images?

In that case:

<div>
  <img ... style="clear: right; float: right;" />
  <img ... style="clear: right; float: right;" />
  <p>Some text goes here, yada yada yada.</p>
</div>

[Robert_R]

Thank you very much. Didn't need the text but that is good to know. Again many thanks!

[ray326]

You could also style them to display:block; within that div since the float doesn't seem to be doing anything special.

[toicontien]

Originally posted by ray326
You could also style them to display:block; within that div since the float doesn't seem to be doing anything special.

That would work great if Robert_R knows how big the images' containing block is. Then he can set the images' displays to block and give them a left margin to push the images over toward the right, which is what he is looking for.