Search code examples
htmlcsspaypalhtml-tablealignment

PayPal table alignment


I am trying to make a store page with paypal links to purchase the items. I was given code from PayPal, but cannot get it to format correctly. I want the two items to be aligned next to each other, but can not figure out how this would be done.

#shirt {
width:380px;
margin:0;
clear:both; 
}

#content {
margin:0 0px 0 0;
margin:0 0px 0 0;
border-right:1px solid #000000;
border-left:1px solid #000000;
padding:10px 25px 30px 25px;
}


    <div id="content">
        <!--SHIRT ONE--!>
        <div id="shirt">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="B2CBLQAD7BJ4J">     
            <table>
                <tr>
                    <td>

            <div class="img">
                <input id="image" type="image" src="cover.png" name="tee" width="250" height="250"></td>
            </div>

            <table>
                <tr>
                    <td><input type="hidden" name="on0" value="Color">Color</td>
                    <td><input type="hidden" name="on1" value="Size">Size</td>
                </tr>
                <tr>
                    <td>
                        <select name="os0">
                            <option value="White">White</option>
                            <option value="Black">Black</option>
                            <option value="Grey">Grey</option>
                        </select>
                    </td>
                    <td>
                        <select name="os1">
                            <option value="S">S </option>
                            <option value="M">M </option>
                            <option value="L">L </option>
                            <option value="XL">XL </option>
                        </select> 
                    </td>
                </tr>
            </table>
            <br />

            <input type="hidden" name="currency_code" value="USD">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
        </div>
        <!--SHIRT TWO--!>
        <div id="shirt">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="B2CBLQAD7BJ4J">     
            <table>
                <tr>
                    <td>

            <div class="img">
                <input id="image" type="image" src="cover.png" name="tee" width="250" height="250"></td>
            </div>

            <table>
                <tr>
                    <td><input type="hidden" name="on0" value="Color">Color</td>
                    <td><input type="hidden" name="on1" value="Size">Size</td>
                </tr>
                <tr>
                    <td>
                        <select name="os0">
                            <option value="White">White</option>
                            <option value="Black">Black</option>
                            <option value="Grey">Grey</option>
                        </select>
                    </td>
                    <td>
                        <select name="os1">
                            <option value="S">S </option>
                            <option value="M">M </option>
                            <option value="L">L </option>
                            <option value="XL">XL </option>
                        </select> 
                    </td>
                </tr>
            </table>
            <br />

            <input type="hidden" name="currency_code" value="USD">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
        </div>
    </div><!--content--!>

Solution

  • Try to change your css like this and give width to container

    #shirt {
     float: left;
     margin: 0;
     width: 380px;
    }
    

    Check this demo http://jsfiddle.net/sanjaymv/9ghZD/