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
    New Coder
    Join Date
    Oct 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Display/float and inline Block Not working?

    I'm trying to move the "purchase" button to be to the right of the product variants.

    Image 1 > Image 2

    To


    My code is

    Code:
    {% if product.available %}
      <form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
        {% if product.options.size > 1 %}
          <div class="select">
            <select id="product-select-{{ product.id }}" name='id'>
              {% for variant in product.variants %}
                <option value="{{ variant.id }}">{{ variant.title }}</option>
              {% endfor %}
            </select>
          </div>
        {% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "Title") %}
          <div class="select">
            <label>{{ product.options[0] }}:</label>
            <select id="product-select-{{ product.id }}" name='id'>
              {% for variant in product.variants %}
                <option value="{{ variant.id }}">{{ variant.title }}</option>
              {% endfor %}
            </select>
          </div>
        {% else %}
          <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
        {% endif %}
     
        {% if settings.display_product_quantity %}
          <div class="left">
           <label for="quantity">Quantity:</label>
           <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" />
          </div>
        {% endif %}
       
        <!-- this is the purchase button on its own-->
        <div class="purchase clearfix {% if settings.display_product_quantity %}inline_purchase{% endif %}">
          {% if settings.cart_return == 'back' %}
            <input type="hidden" name="return_to" value="back" />
          {% endif %}
          <input type="submit" name="add" value="Purchase" id="Purchase" class="action_button" />
        </div>  
      </form>
    This is a link to the main CSS file

    http://pastebin.com/S4pat9yw

    I've tried throwing each section in its own <div> giving it an id, and putting in custom CSS with display:inline-block; and that didn't work, then I tried floating left and right, and that didn't work.

  • #2
    New Coder
    Join Date
    Nov 2013
    Location
    Athens, Greece
    Posts
    14
    Thanks
    0
    Thanked 1 Time in 1 Post
    your first element should have css float:left
    your next element should have css float:right

    AND AFTER THAT put a div with clear:both

    Then it will work!


  •  

    Tags for this Thread

    Posting Permissions

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