Two images on one line?

[Brian]

I have this problem where I have two different images. And I want both images one on one side and the other on the other side.

I've been doing "float: left" and "float: right" for the other, but it's not working very well, float:right one will go all the way to the right, it won't be contained inside the div and float:left will go all the way to the left, it won't stay near the center.

I tried doing "inline" display, but that just doesn't work, only "block" works, which puts both images on their own line.

I tried absolute positioning but then IE for some reason screws everything up because it doesn't understand CSS at all.

What do I do?

[ktiedt]

float them both left and you will get them side by side.... if you want space between them give the left one margin-right or the right one margin-left..... otherwise use a table (ewww)

[Brian]

I'll give that a try.

[Pixelus]

Code:

<div style="width:250px; float:left; margin-right:20px;">image 1</div>
<div style="width:250px; float:left;">image 2</div>

[ktiedt]

excessive, no need for the divs at all.... just float the image tags

[Pixelus]

is that compliant with the major browsers or does IE fart all over it?

[Logiq]

Sounds like you got it fixed, but for others reading:

You need to clear the divs, as we discussed. That is the main reason IE creates problems is people not clearing elements.
<img src="leftimage.jpg" alt="Left Image" style="float:left;" />
<img src="rightimage.jpg" alt="Right Image" style="float:right;" />
<div style="clear:both"></div>