how to display mysql query results in sequential div’s [closed]

I’m stuck at the moment where i would like to display contents from mysql database in divs with sequential manner. I got the query successful but i got the result in the div in a list manner. Can any one suggest me how it display in a sequential manner. The code is

$sql="select * from admn_pckge";
$result=mysql_query($sql);
<?php
     if(mysql_num_rows($result)>0)
     {
         while($row=mysql_fetch_array($result))
         {
             ?>
             <div class="pricing-container">
                 <div class="header">
                    Premium
                 </div>
             <div class="price">
                 <span>
                     <sup class="currency"></sup><span class="figure"><?php echo $row['admn_pckge_price']; ?></span> <sup class="cent">
                  Rs</sup> 
                     <sup class="frequency">Event</sup>
              </span>
              <div class='details'>based on 1 yr</div>
             </div>
             <div class="itemsWrapper">

                 <ul class="items">
                     <div class="item">
                           <?php echo $row['admn_pckge_itm1']; ?>     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm1_qty']; ?>
                     </div><hr/>
                     <div class="item">
                           <?php echo $row['admn_pckge_itm2']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm2_qty']; ?>
                     </div><hr/>
                     <div class="item">
                        <?php echo $row['admn_pckge_itm3']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm3_qty']; ?>
                    </div><hr/>
                     <div class="item">
                            <?php echo $row['admn_pckge_itm4']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm4_qty']; ?>
                     </div><hr/>
                     <div class="item">
                        <?php echo $row['admn_pckge_itm5']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm5_qty']; ?>
                     </div><hr/>
                     <div class="item">
                        <?php echo $row['admn_pckge_itm6']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm6_qty']; ?>
                    </div><hr/>
                     <div class="item">
                        <?php echo $row['admn_pckge_itm7']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm7_qty']; ?>
                     </div><hr/>

                     </ul>
                 </div>
             </div>
             <?php
              }
             }
            ?>

            <style>
           .pricing-container {
               width: 300px;
               text-align: center;
               font-family: 'Open Sans Condensed', sans-serif;
            }
           .pricing-container .header {
               background: #2F2F2F;
               color: white;
               padding: 25px;
               font-size: 2.5em;
               font-weight: 300;
               border-radius: 5px 5px 0 0;
           }
       .pricing-container .price {
        background: #66D2AC;
       background: linear-gradient(10deg, #93da9f 30%, #66d2ac 80%);
       color: white;
       padding: 10px;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       font-size: 1.3em;
       }
      .pricing-container .price .figure {
      font-weight: 800;
     font-size: 1.2em;
     margin: 0 2px;
     }
     .pricing-container .price .cent {
     text-decoration: underline;
      }
    .pricing-container .price .frequency {
     color: #2F757F;
     text-shadow: none;
      }
      .pricing-container .price:hover .details {
     height: 20px;
     }
    .pricing-container .price .details {
     color: #2F757F;
     font-size: .6em;
      display: block;
       height: 0;
      overflow: hidden;
       transition: all 400ms ease;
      }
     .pricing-container .itemsWrapper {
    border: 2px solid #E6E6E6;
       border-top: none;
       border-radius: 0 0 2px 2px;
     background: white;
       box-shadow: inset 14px 0 white, inset 15px 0 #f2f2f2, inset -14px 0  white, inset -15px 0 #f2f2f2;
      }
     .pricing-container .itemsWrapper .items {
      list-style: none;
      padding: 15px;
       margin: 0;
       }
      .pricing-container .itemsWrapper .item {
     padding: 10px;
        text-transform: capitalize;
        font-size:20px;
       font-style:oblique;
         }
        </style>

Answer

Try moving your CSS above your other code… it really should be inside your <head></head> tags.

Then you have two choices…

If you want all divs to be inside one list item, this is the code sample

If you want each div to be a list item of its own, this is the code sample…

          <ul class="items">
            <li>
              <div class="item">
                    <?php echo $row['admn_pckge_itm1']; ?>     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm1_qty']; ?>
              </div><hr/>
            </li>
            <li>
              <div class="item">
                    <?php echo $row['admn_pckge_itm2']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm2_qty']; ?>
              </div><hr/>
            </li>
            <li>
              <div class="item">
                 <?php echo $row['admn_pckge_itm3']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm3_qty']; ?>
             </div><hr/>
            </li>
              </ul>
          </div>
      </div>
      <?php
       }
      }
     ?>

Advertisement

Answer