Alternating left and right positioning with CSS

Question

So using PHP I am displaying a page of images. I have a div tag for containing these pictures.

What Im trying to do, is alternate positioning these images on the left and right side of the browser.

So entry 1 is positioned on the left scrolling down entry 2 is positioned on the right etc.

If my div container is style="position:relative;width=100%" How do I make my images alternate hugging the left and side of the browser?

Answer 1

There are several possible ways, one would be the following:

CSS:

div img{
 float:left;  
 clear:both;    
}
div img:nth-of-type(2n){
  float:right;
}

Check the Example

If you dont want them alternate that way, use

div img{
 float:left;  
 clear:left;    
}
div img:nth-of-type(2n){
  float:right; 
  clear:right;
}

Depending on the browsers you have to support (Internet Explorer 8 and lower don't support that selector), use a class on all even images and replace :nth-of-type(2n) with that class.