# Randomise DIV's

**URL:** <https://forum.kirupa.com/t/randomise-divs/331471>\
**Category:** web dev\
**Created:** [August 7, 2013, 11:55pm UTC](https://forum.kirupa.com/t/randomise-divs/331471 "2013-08-07T23:55:30Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tailz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tailz/32/7262_2.png) [@tailz](https://forum.kirupa.com/u/tailz)\
**Post date:** [August 7, 2013, 11:55pm UTC](https://forum.kirupa.com/t/randomise-divs/331471/1 "2013-08-07T23:55:30Z")

</div>

Hello folks,  
I’m working on a little web site that has a “home page” that consists of 100px x 100px thumbnail images that link to separate info pages. I’d like to randomise the thumbnails each time the page is loaded. But I have no idea how too. Can anyone help me out?

Thumbnail code:

```auto
<div id="holder" style="background-image: url(images/100-mini-adventures.jpg)"><div id="overlay"><a href="compass-points.html" id="link"></a></div></div>

```

CSS code that configures the thumbnail:

```auto
#holder { width: 100px; height: 100px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 4px 1px #5c2b00; box-shadow: 0px 0px 4px 1px #5c2b00; float: left; margin: 3px;}
#overlay { width: 98px; height: 98px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#00ffffff',GradientType=0 ); -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #FFF;}
#link { display: block; height: 98px; width: 98px;}

```

A sample of how the thumbnails appear on the page, can be found here: [http://mobile.wyldfurr.com/](http://mobile.wyldfurr.com/)

So what i am trying to do, is when the page is loaded, the thumbnails might be arranged as A, B, C, D, E. But load the page again and it could be: B, E, A, C, D. Load the page again, and the boxes are jumbled up again.