Alternating left and right positioning with CSS

Question

So, using PHP, I am showing an image page. I have a div tag to host these images.

What I'm trying to do is alternatively position these images on the left and right side of the browser.

So, position 1 is located on the left; scroll down; input 2 is positioned on the right, etc.

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

Answer 1

There are several possible ways:

CSS

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

Check Example

If you do not want them to alternate this path, use

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

Depending on the browsers you must support (Internet Explorer 8 and below do not support this selector), use the class on all even images and replace :nth-of-type(2n) with this class.

Answer 2

for left huggers:

 style="float:left;clear:left;" 

and for right huggers

 style="float:right;clear:right;" 

... although if your container is not wide enough to accommodate more than two images, you do not need “clear” ads.

Answer 3

Set float: left; when index%2 == 0 and float: right; when index%2==1 index is an index loop variable, iterating over your images.

Answer 4

In a similar vein, other answers

 div img:nth-child(even) { float: right; clear: right; } div img:nth-child(odd) { float: left; clear: left; } 

Demo: http://jsfiddle.net/GL667/