Jquery help on div

Jquery help on div

Hi,

I am trying to build client side Grid.

 i will be pulling the  values  from db and making it on the div box. .
let us take an example of  i have 1000 records in my backend and on the grid i will diaply 1000 boxes by filling it's values. I just gven one box detail on this post. Am struggling to create dynamic box and add it to the grid shows in the example link along with pagination.

Can you please help on creating the box dynamically and addding to the placeholder using client side code. Any samples more appreciated

here is my example code
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <title></title>
  4.     <style type="text/css">
  5.         .hiddenRow {
  6.             padding: 0 !important;
  7.         }

  8.         .box {
  9.             border-radius: 15px;
  10.             border-style: solid;
  11.             border-width: 1px;
  12.             border-color: #79a876;
  13.             width: 215px;
  14.             height: 230px;
  15.             background-color: #ffffff;
  16.             padding:;
  17.             box-shadow: 2px 2px 3px #888888;
  18.         }

  19.         .RichMannametext {
  20.             font-family: Arial, sans-serif;
  21.             font-size: 14px;
  22.             color: #007500;
  23.             margin-top: 8px;
  24.             margin-left: 8px;
  25.         }

  26.         .AboutRichMan {
  27.             font-family: Arial, sans-serif;
  28.             font-size: 12px;
  29.             color: #333333;
  30.             margin-left: 8px;
  31.         }

  32.         .RichManAvailability {
  33.             margin-left: 8px;
  34.             width: 27px;
  35.             height: 27px;
  36.             z-index: 2;
  37.             position: absolute;
  38.         }

  39.         .RichManmark {
  40.             width: 70px;
  41.             height: 70px;
  42.             background-image: url(http://www.cutmypic.com/images/btn-go-en.png);
  43.             z-index: 1;
  44.             position: absolute;
  45.             text-align: center;
  46.             margin-top: 5px;
  47.             margin-right: px;
  48.             margin-left: 140px;
  49.             background-repeat: no-repeat;
  50.         }

  51.         .alternativeimageblock {
  52.             width: 125px;
  53.             height: 125px;
  54.             margin-left: auto;
  55.             margin-right: auto;
  56.             margin-top: 12px;
  57.         }

  58.         .scoretext {
  59.             font-family: Arial, sans-serif;
  60.             font-size: 30px;
  61.             color: #FFFFFF;
  62.             text-align: center;
  63.             vertical-align: middle;
  64.             line-height: 70px;
  65.         }

  66.         .EducateMore {
  67.             width: 180px;
  68.             height: 25px;
  69.             margin-left: auto;
  70.             margin-top: 10px;
  71.             margin-right: auto;
  72.         }
  73.     </style>
  74. </head>
  75. <body>
  76.     <form id="form1" runat="server"> 

  77.                             <div class="box">
  78.                                 <div class="RichManmark"><span class="scoretext">100</span></div>
  79.                                 <div class="RichMannametext"><strong>Bill Gates</strong></div>
  80.                                 <div class="AboutRichMan">Microsoft CEO</div>
  81.                                 <div class="RichManAvailability">
  82.                                     <img src="http://images.encyclopedia.com/utility/image.aspx?id=2793387&imagetype=Hero" width="27" height="27" alt="" /></div>
  83.                                 <div class="alternativeimageblock">
  84.                                     <img src="http://images.encyclopedia.com/utility/image.aspx?id=2793387&imagetype=Hero" alt="" width="125" height="125" class="imgcenter" /></div>
  85.                                 <div class="EducateMore">Richest man in the world</div>
  86.                             </div>
  87.                        
  88.     </form>
  89. </body>
  90. </html>