Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Apr 2014
    Posts
    1
    Member #
    39066

    Extra white space on the side of masonry layout grid

    My website has a masonry layout, similar to that of pinterest. I just need help figuring out why there is a big white space on the right side of the grid.
    The grid is called #container. (If you dont's see the extra space, resize your screen and you will see it.) Thanks.
    Code:
    <div id="container" class="masonry">
      <div class="item"><a href="<?php echo $navurl; ?>/proddetail.php?prod=Grand_Prize" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','images/home_grand-prize_mo.jpg',1)"><img src="images/home_grand-prize.jpg" alt="Grand Prize" name="Image20" width="300" height="257" border="0" id="Image20" /></a></div>
      <div class="item"><a href="proddetail.php?prod=Split_The_Pot" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/home_split-the-pot_mo.jpg',1)"><img src="images/home_split-the-pot.jpg" alt="Split the Pot" name="Image21" width="300" height="350" border="0" id="Image21" /></a></div>
      <div class="item"><a href="proddetail.php?prod=Jackpot" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','images/home_jackpot_mo.jpg',1)"><img src="images/home_jackpot.jpg" alt="Jackpot" name="Image22" width="300" height="294" border="0" id="Image22" /></a></div>
      <div class="item"><a href="<?php echo $navurl; ?>/products.php?cat=102" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','images/home_50_mo.jpg',1)"><img src="images/home_50.jpg" alt="$50" name="Image23" width="300" height="468" border="0" id="Image23" /></a></div>
      <div class="item"><a href="<?php echo $navurl; ?>/products.php?cat=103" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','images/home_35_mo.jpg',1)"><img src="images/home_35.jpg" alt="$35" name="Image24" width="300" height="358" border="0" id="Image24" /></a></div>
      <div class="item"><img src="images/home_diamond.jpg" width="300" height="120" /></div>
      <div class="item"><a href="<?php echo $navurl; ?>/products.php?cat=104" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','images/home_25_mo.jpg',1)"><img src="images/home_25.jpg" alt="$25" name="Image25" width="300" height="351" border="0" id="Image25" /></a></div>
      <div class="item"><a href="<?php echo $navurl; ?>/products.php?cat=105" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','images/home_20_mo.jpg',1)"><img src="images/home_20.jpg" alt="$20" name="Image26" width="300" height="380" border="0" id="Image26" /></a></div>
      <div class="item"><a href="<?php echo $navurl; ?>/products.php?cat=106" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','images/home_10_mo.jpg',1)"><img src="images/home_10.jpg" alt="$10" name="Image27" width="300" height="477" border="0" id="Image27" /></a></div>
      <div class="item"><a href="<?php echo $navurl; ?>/products.php?cat=107" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','images/home_5_mo.jpg',1)"><img src="images/home_5.jpg" alt="$5" name="Image28" width="300" height="405" border="0" id="Image28" /></a></div>
      <div class="item"><a href="<?php echo $navurl; ?>/proddetail.php?prod=Packages"><img src="images/home_ticket-packages.jpg" alt="Ticket Packages" width="300" height="423" border="0" /></a></div>
      <div class="item"><a href="alumni.php"><img src="images/home_alumnus.jpg" border="0" /></a></div>
      <div class="item"><a href="freeprizes.php"><img src="images/home_bonus.jpg" alt="Bonus Packages" width="300" height="299" border="0" /></a></div>
      
     
    </div>
    CSS:
    Code:
    .item { 
    /*width: 18.05%;*/
    padding:15px 15px 0 0;
    }
    
    #container{
    	padding:50px 0 100px 15px;
    }
    JQUERY:
    Code:
    <script>
            var $container = $('#container');
    // initialize
    $container.masonry({
      columnWidth: 50,
      itemSelector: '.item'
    });
    var msnry = $container.data('masonry');
    
       </script>
    Link to this page:

    YTCTE 9th Annual Chinese Auction: Sounds of Music

    Thanks!

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com