Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    127
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Tables won't line up

    I created a table with three rows and two columns. Everything works OK except for the last row....it won't line up correctly. However, if I copy and paste the code into a text editor, it works fine. Any ideas?

    Here's a image, the code is below:

    Code:
    <style type="text/css">
    	.gallery-list
    	{
    		 
    	}
    	.gallery-list .container
    	{ 
    		clear:both;
    		width:100%;
    		padding-top:10px; 
    		padding-bottom:10px; 
    	} 
    	.gallery-list .container .imgContainer
    	{
    		width:25%;
    		float:left;
    		padding-top:5px;
    	}
    	.gallery-list .container  .imgContainer img
    	{
    		width:98%; 
    	}
    	.gallery-list .container .descContainer
    	{
    		width:74%;
    		float:left;
    		padding-left:5px;
    	}
    	
    	.gallery-grid
    	{
    		 
    	}
    	.gallery-grid .container
    	{  
    		width:33%;
    		padding-top:10px; 
    		padding-bottom:10px; 
    		float:left;
    	} 
    	.gallery-grid .container .imgContainer
    	{
    		 
    	}
    	.gallery-grid .container .imgContainer img
    	{
    		width:98%; 
    	}
    	.gallery-grid .container .descContainer
    	{
    		display: none;
    	}
    	
    	ul.pager
    	{
    		list-style-type: none;
    		margin:0px;
    	padding:0px;
    	}
    	.pager li {display: inline; }
    	.pager li a {padding:5px; border:solid 1px #ccc;margin:2px;}
    	.current
    	{
    		color:black;
    		
    	}
    	.current:hover
    	{
    		text-decoration:none;
    	}
    	#pager
    	{
    		clear:both;
    	}
    </style>
    <script type="text/javascript">
    	function goToCatPage()
    	{
    		var categoryId = jQuery('#category').val();
    		if(categoryId== 0 )
    		{
    			var pageUrl= "http://beauwaldrop.com/ahs83/";
    			window.location = pageUrl;
    		}
    		else{
    			var pageUrl= "http://beauwaldrop.com/ahs83/?catid="+categoryId+""; 
    			window.location = pageUrl;
    		}
    	}
    </script>
    Category:
    <select id="category" name="category" onchange="goToCatPage();">
    	 
    	<option value="0" >All</option>
    		 
    				<option value="1"   >Single(3)</option>
    	 
    				<option value="2"   >Couples(3)</option>
    	 
    </select>
    
    <table border="1">
    <tr>
    <td><div class="container">
    			<div class="imgContainer">
    				 
    				<img  src=""/>
    			</div>
    			<div class="descContainer">
    				<div class="name">
    					<h2 style="color:#000;text-transform:uppercase;margin:0; font-size: 14px;">Friday Activities Only (Single)</h2>
    				</div>
    			
    				<div class="shortcode">
    					 <object class="simpleecommcartAddToCartButton">
     
    
     
    
      <form id='cartButtonForm_3' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
        <input type='hidden' name='task' id="task_3" value='addToCart' />
        <input type='hidden' name='simpleecommcartItemId' value='3' />
        
    	<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
    	
            
        
         
    	  <span style="color:#666;font-size:1.1em;"><em></em></span>
    	  	   
          <span style="font-weight:bold;font-size:1.01em;">Price: $35.00</span>
            
            
               <input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">       
              
          
                  
          	  
    	  			 <br><input type='submit' value='Add To Cart' name='addToCart_3' id='addToCart_3' />
    				  
    	  
                     
                      
            
              <input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
          <div id="stock_message_box_3" class="SimpleEcommCartUnavailable" style="display: none;">
            <h2>We're Sorry</h2>
            <p id="stock_message_3"></p>
            <input type="button" name="close" value="Ok" id="close" class="modalClose" />
          </div>
        
      </form>
     
     
      
    <script type="text/javascript">
    /* <![CDATA[ */
    
    (function($){
      $(document).ready(function(){
        $('.SimpleEcommCartAjaxWarning').hide();
        
        $('#addToCart_3').click(function() {
          $('#task_3').val('ajax');
          var mydata = getCartButtonFormData('cartButtonForm_3');
                $.ajax({
              type: "POST",
              url: 'http://beauwaldrop.com/ahs83/wp-admin/admin-ajax.php',
              data: mydata,
              dataType: 'json',
              success: function(result) {
                if(result[0]) {
                  $('#task_3').val('addToCart');
                  $('#cartButtonForm_3').submit();
                }
                else {
                  $('#stock_message_box_3').fadeIn(300);
                  $('#stock_message_3').html(result[1]);
                }
              },
              error: function(xhr,err){
                  alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                            }
          });
          return false;
        });
     
    	$(".hascartwidget").val($("#simpleecommcart_cart_sidebar").val());
      })
    })(jQuery);
    
    /* ]]&gt; */
    </script>
    
    </object>
    				</div>
    			</div>
    		</div>  
    				</td>
    <td><div class="container">
    			<div class="imgContainer">
    				 
    				<img  src=""/>
    			</div>
    			<div class="descContainer">
    				<div class="name">
    					<h2 style="color:#000;text-transform:uppercase;margin:0; font-size: 14px;">Friday Activities Only (Couple)</h2>
    				</div>
    				
    				<div class="shortcode">
    					 <object class="simpleecommcartAddToCartButton">
     
    
     
    
      <form id='cartButtonForm_4' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
        <input type='hidden' name='task' id="task_4" value='addToCart' />
        <input type='hidden' name='simpleecommcartItemId' value='4' />
        
    	<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
    	
            
        
         
    	  <span style="color:#666;font-size:1.1em;"><em></em></span>
    	  	   
          <span style="font-weight:bold;font-size:1.01em;">Price: $50.00</span>
            
            
               <input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">       
              
          
                  
          	  
    	  			 <br><input type='submit' value='Add To Cart' name='addToCart_4' id='addToCart_4' />
    				  
    	  
                     
                      
            
              <input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
          <div id="stock_message_box_4" class="SimpleEcommCartUnavailable" style="display: none;">
            <h2>We're Sorry</h2>
            <p id="stock_message_4"></p>
            <input type="button" name="close" value="Ok" id="close" class="modalClose" />
          </div>
        
      </form>
     
     
      
    <script type="text/javascript">
    /* <![CDATA[ */
    
    (function($){
      $(document).ready(function(){
        $('.SimpleEcommCartAjaxWarning').hide();
        
        $('#addToCart_4').click(function() {
          $('#task_4').val('ajax');
          var mydata = getCartButtonFormData('cartButtonForm_4');
                $.ajax({
              type: "POST",
              url: 'http://beauwaldrop.com/ahs83/wp-admin/admin-ajax.php',
              data: mydata,
              dataType: 'json',
              success: function(result) {
                if(result[0]) {
                  $('#task_4').val('addToCart');
                  $('#cartButtonForm_4').submit();
                }
                else {
                  $('#stock_message_box_4').fadeIn(300);
                  $('#stock_message_4').html(result[1]);
                }
              },
              error: function(xhr,err){
                  alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                            }
          });
          return false;
        });
     
    	$(".hascartwidget").val($("#simpleecommcart_cart_sidebar").val());
      })
    })(jQuery);
    
    /* ]]&gt; */
    </script>
    
    </object>
    				</div>
    			</div>
    		</div>  
    				
    		
    	 </td>
    </tr>
    <tr>
    <td><div class="container">
    			<div class="imgContainer">
    				 
    				<img  src=""/>
    			</div>
    			<div class="descContainer">
    				<div class="name">
    					<h2 style="color:#000;text-transform:uppercase;margin:0; font-size: 14px;">Saturday Activities Only (Single)</h2>
    				</div>
    				
    				<div class="shortcode">
    					 <object class="simpleecommcartAddToCartButton">
     
    
     
    
      <form id='cartButtonForm_5' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
        <input type='hidden' name='task' id="task_5" value='addToCart' />
        <input type='hidden' name='simpleecommcartItemId' value='5' />
        
    	<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
    	
            
        
         
    	  <span style="color:#666;font-size:1.1em;"><em></em></span>
    	  	   
          <span style="font-weight:bold;font-size:1.01em;">Price: $65.00</span>
            
            
               <input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">       
              
          
                  
          	  
    	  			 <br><input type='submit' value='Add To Cart' name='addToCart_5' id='addToCart_5' />
    				  
    	  
                     
                      
            
              <input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
          <div id="stock_message_box_5" class="SimpleEcommCartUnavailable" style="display: none;">
            <h2>We're Sorry</h2>
            <p id="stock_message_5"></p>
            <input type="button" name="close" value="Ok" id="close" class="modalClose" />
          </div>
        
      </form>
    
      
    <script type="text/javascript">
    /* <![CDATA[ */
    
    (function($){
      $(document).ready(function(){
        $('.SimpleEcommCartAjaxWarning').hide();
        
        $('#addToCart_5').click(function() {
          $('#task_5').val('ajax');
          var mydata = getCartButtonFormData('cartButtonForm_5');
                $.ajax({
              type: "POST",
              url: 'http://beauwaldrop.com/ahs83/wp-admin/admin-ajax.php',
              data: mydata,
              dataType: 'json',
              success: function(result) {
                if(result[0]) {
                  $('#task_5').val('addToCart');
                  $('#cartButtonForm_5').submit();
                }
                else {
                  $('#stock_message_box_5').fadeIn(300);
                  $('#stock_message_5').html(result[1]);
                }
              },
              error: function(xhr,err){
                  alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                            }
          });
          return false;
        });
     
    	$(".hascartwidget").val($("#simpleecommcart_cart_sidebar").val());
      })
    })(jQuery);
    
    /* ]]&gt; */
    </script>
    
    </object>
    				</div>
    			</div>
    		</div>  			
    	 </td>
    <td><div class="container">
    			<div class="imgContainer">
    				 
    				<img  src=""/>
    			</div>
    			<div class="descContainer">
    				<div class="name">
    					<h2 style="color:#000;text-transform:uppercase;margin:0; font-size: 14px;">Saturday Activities Only (Couple)</h2>
    				</div>
    			
    				<div class="shortcode">
    					 <object class="simpleecommcartAddToCartButton">
     
    
     
    
      <form id='cartButtonForm_6' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
        <input type='hidden' name='task' id="task_6" value='addToCart' />
        <input type='hidden' name='simpleecommcartItemId' value='6' />
        
    	<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
    	
            
        
         
    	  <span style="color:#666;font-size:1.1em;"><em></em></span>
    	  	   
          <span style="font-weight:bold;font-size:1.01em;">Price: $90.00</span>
            
            
               <input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">       
              
          
                  
          	  
    	  			 <br><input type='submit' value='Add To Cart' name='addToCart_6' id='addToCart_6' />
    				  
    	  
                     
                      
            
              <input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
          <div id="stock_message_box_6" class="SimpleEcommCartUnavailable" style="display: none;">
            <h2>We're Sorry</h2>
            <p id="stock_message_6"></p>
            <input type="button" name="close" value="Ok" id="close" class="modalClose" />
          </div>
        
      </form>
      
    <script type="text/javascript">
    /* <![CDATA[ */
    
    (function($){
      $(document).ready(function(){
        $('.SimpleEcommCartAjaxWarning').hide();
        
        $('#addToCart_6').click(function() {
          $('#task_6').val('ajax');
          var mydata = getCartButtonFormData('cartButtonForm_6');
                $.ajax({
              type: "POST",
              url: 'http://beauwaldrop.com/ahs83/wp-admin/admin-ajax.php',
              data: mydata,
              dataType: 'json',
              success: function(result) {
                if(result[0]) {
                  $('#task_6').val('addToCart');
                  $('#cartButtonForm_6').submit();
                }
                else {
                  $('#stock_message_box_6').fadeIn(300);
                  $('#stock_message_6').html(result[1]);
                }
              },
              error: function(xhr,err){
                  alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                            }
          });
          return false;
        });
     
    	$(".hascartwidget").val($("#simpleecommcart_cart_sidebar").val());
      })
    })(jQuery);
    
    /* ]]&gt; */
    </script>
    
    </object>
    				</div>
    			</div>
    		</div>  
    				</td>
    </tr>
     <tr>
                <td>
                <div class="gallery-list"> 
    		 
    				
    		  
    		<div class="container">
    			<div class="imgContainer">
    				 
    				<img  src=""/>
    			</div>
    			<div class="descContainer">
    				<div class="name">
    					<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Single)</h2>
    				</div>
    				<div class="desc">
    									</div>
    				<div class="shortcode">
    					 <object class="simpleecommcartAddToCartButton">
     
    
     
    
      <form id='cartButtonForm_1' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
        <input type='hidden' name='task' id="task_1" value='addToCart' />
        <input type='hidden' name='simpleecommcartItemId' value='1' />
        
    	<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
    	
            
        
         
    	  <span style="color:#666;font-size:1.1em;"><em></em></span>
    	  	   
          <span style="font-weight:bold;font-size:1.01em;">Price: $89.00</span>
            
            
               <input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">       
              
          
                  
          	  
    	  			 <br><input type='submit' value='Add To Cart' name='addToCart_1' id='addToCart_1' />
    				  
    	  
                     
                      
            
              <input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
          <div id="stock_message_box_1" class="SimpleEcommCartUnavailable" style="display: none;">
            <h2>We're Sorry</h2>
            <p id="stock_message_1"></p>
            <input type="button" name="close" value="Ok" id="close" class="modalClose" />
          </div>
        
      </form>
     
     
    
          <div class="SimpleEcommCartAjaxWarning">Inventory tracking will not work because your site has javascript errors. 
          <a href="http://simpleecommcartbasic.wordpress.com//jquery-errors/">Possible solutions</a></div>
      
    <script type="text/javascript">
    /* <![CDATA[ */
    
    (function($){
      $(document).ready(function(){
        $('.SimpleEcommCartAjaxWarning').hide();
        
        $('#addToCart_1').click(function() {
          $('#task_1').val('ajax');
          var mydata = getCartButtonFormData('cartButtonForm_1');
                $.ajax({
              type: "POST",
              url: 'http://beauwaldrop.com/ahs83/wp-admin/admin-ajax.php',
              data: mydata,
              dataType: 'json',
              success: function(result) {
                if(result[0]) {
                  $('#task_1').val('addToCart');
                  $('#cartButtonForm_1').submit();
                }
                else {
                  $('#stock_message_box_1').fadeIn(300);
                  $('#stock_message_1').html(result[1]);
                }
              },
              error: function(xhr,err){
                  alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                            }
          });
          return false;
        });
     
    	$(".hascartwidget").val($("#simpleecommcart_cart_sidebar").val());
      })
    })(jQuery);
    
    /* ]]&gt; */
    </script>
    
    </object>
    				</div>
    			</div>
    		</div> 
                </td>
                <td>
                <div class="container">
    			<div class="imgContainer">
    				 
    				<img  src=""/>
    			</div>
    			<div class="descContainer">
    				<div class="name">
    					<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Couple)</h2>
    				</div>
    				<div class="desc">
    									</div>
    				<div class="shortcode">
    					 <object class="simpleecommcartAddToCartButton">
     
    
     
    
      <form id='cartButtonForm_2' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
        <input type='hidden' name='task' id="task_2" value='addToCart' />
        <input type='hidden' name='simpleecommcartItemId' value='2' />
        
    	<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
    	
            
        
         
    	  <span style="color:#666;font-size:1.1em;"><em></em></span>
    	  	   
          <span style="font-weight:bold;font-size:1.01em;">Price: $129.00</span>
            
            
               <input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">       
              
          
                  
          	  
    	  			 <br><input type='submit' value='Add To Cart' name='addToCart_2' id='addToCart_2' />
    				  
    	  
                     
                      
            
              <input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
          <div id="stock_message_box_2" class="SimpleEcommCartUnavailable" style="display: none;">
            <h2>We're Sorry</h2>
            <p id="stock_message_2"></p>
            <input type="button" name="close" value="Ok" id="close" class="modalClose" />
          </div>
        
      </form>
     
     
    
          <div class="SimpleEcommCartAjaxWarning">Inventory tracking will not work because your site has javascript errors. 
          <a href="http://simpleecommcartbasic.wordpress.com//jquery-errors/">Possible solutions</a></div>
      
    <script type="text/javascript">
    /* <![CDATA[ */
    
    (function($){
      $(document).ready(function(){
        $('.SimpleEcommCartAjaxWarning').hide();
        
        $('#addToCart_2').click(function() {
          $('#task_2').val('ajax');
          var mydata = getCartButtonFormData('cartButtonForm_2');
                $.ajax({
              type: "POST",
              url: 'http://beauwaldrop.com/ahs83/wp-admin/admin-ajax.php',
              data: mydata,
              dataType: 'json',
              success: function(result) {
                if(result[0]) {
                  $('#task_2').val('addToCart');
                  $('#cartButtonForm_2').submit();
                }
                else {
                  $('#stock_message_box_2').fadeIn(300);
                  $('#stock_message_2').html(result[1]);
                }
              },
              error: function(xhr,err){
                  alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                            }
          });
          return false;
        });
     
    	$(".hascartwidget").val($("#simpleecommcart_cart_sidebar").val());
      })
    })(jQuery);
    
    /* ]]&gt; */
    </script>
    
    </object>
    				</div>
    			</div>
    		</div>  
    				
                </td>
            </tr>
    </table>

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Have you cleared the float after the last div ?

    I can't read your code*, you need to format it.

    * can't be bothered


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •