I need an alternative to float ...

I think ...

[twist]

Excuse my newness :)

I want to turn a table into div tags.

Basically 4 images, 2 left, 2 right, and the center to have a background.

When I use float the images will move down if I squeeze the page together. Is there a way to keep all the conent on one line?

Here is my div setup so far,

<div class="container_for_images_with_bg_image">
<img class="left" src="image1.gif">
<img class="left" src="image2.gif">
<img class="right" src="image3.gif">
<img class="right" src="image4.gif">
</div>

[Purple Martin]

A couple of quick'n'dirty fixes:

Edit the images in a pair together into a single image that looks like two next to each other.

Put each pair of images in a div that has it's width set to the total width of the two images.

[grahamstewart]

If you know the widths of the images then just set the width of the container div to be their sum, then it won't resize and the images won't move.

(Or if you need the container div to be bigger then wrap them in a second div)

[sabai]

set

clear:none;

in the image styles

[twist]

Thanks for the advice guys, got it.