Your Customers are Mobile, you will be too …

In this tutorial we will show you a simple way of staggering images as they go down your website. With this method if you wish to control the position of a particular photo you still can with inline CSS, however if you do not style a particular image the CSS will automatically stagger your images down the page.

The images will stagger like the images do in this screenshot I took of a test site.Images staggered on a website.

How to stagger Images down a Webpage.

Now the first thing we want to take into consideration is we Don’t want to apply this to all the images on the page, only those in our content section. We don’t want our css moving our other images in the header and footer or our pages ads back and forth. We only want to stagger the images relating to our content.

First apply any styling you wish to use to your images then decide do we want our images to start at the left or the right at the top of our page. This will be which way we will float our odd numbered images.

#content img:nth-of-type(odd) {
  float: right;
  clear: left;
}

In this case I have started out by floating my images to the right so I want to float all even numbered images to float to the left

#content img:nth-of-type(even) {
  float: left;
  clear: right;
}

Now if you refresh your page you will see we are already finished. This is a very simple technique and is far easier than many of the other methods floating around out there. By using a much overlooked selector nth-of-type we are able to quickly and easily move our images around with very little coding at all.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: