Question

I am using:

 <div class="class1">Image</div>
 <div class="class2">Image</div>
 <div class="class3">Image</div>
 <div class="class4">Image</div>

I am using images as background which should all be in the same line (all images).
I am using float:left in which two images will be float:right.
But my problem starts when the browser is resizing. All the images will be disordered in different lines.

Any help is appreaciated.

Answer 1

Your question is unclear.

If you are wanting all four divs (and why are you using a div instead of an <img>?) to stay in a row, and not wrap onto the line below if the browser window is too small, then you could try (assuming an image width of 200px – using a style instead of a class for simplicity – this is not suitable for deployment!):

<div style="width:800px">
  <div class="class1">Image</div>
  <div class="class2">Image</div>
  <div class="class3">Image</div>
  <div class="class4">Image</div>
</div>

This will force the container div to be wide enough to contain all four images in a row. However, if the browser isn’t wide enough to show them, you will get a horizontal scroll bar (which is not good from a User Experience point of view)

Alternatively, use your current HTML, and just float all of them left. If the browser window is resized, then the last image will drop onto the next row, and the divs should remain in the same order