Clever Geek Handbook

How do I display these items in a row?

I have this site:

http://www.les-toiles.co/shop/amandine-dress/

I put a picture to better understand what I want. I want to arrange these scopes as a single unit to match "in stock".

This is the HTML code:

<div class="single_variation_wrap" style="">
    <div class="single_variation">
         <p class="stock in-stock">Only 2 left in stock</p>
    </div>
    <div class="variations_button add-cart">
        <div class="cart-number">
            <span></span>
            <div class="quantity">
                <input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
           </div>
       </div>
       <button type="submit" class="button single_add_to_cart_button alt btn-block">
           <i class="icon-cart2"></i>
           Add to cart              
       </button>
    </div>

    <input type="hidden" name="add-to-cart" value="1726">
    <input type="hidden" name="product_id" value="1726">
    <input type="hidden" name="variation_id" value="1922">
</div>

How can I solve this problem with CSS?

I tried to add this CSS code but unfortunately doesn't work

.cart-number {float:left;display:inline-block;}
+3


source to share


2 answers


This is not just an easy thing that you can get. There are many more things to change. Let me see how far I can explain. See attached images. To do this, you must use the Chrome Dev Toolbar or Firebug Firefox for this to help.

First, your Wishlist button div is completely outside of the FORM element . Therefore, you cannot make it inline, unless you move it inside the FORM element . See 1st image.

enter image description here



Now I have moved the DIV block of your Wishlist button inside the FORM element and changed the CSS for many of the classes and DIVs, definitely INLINE, for demonstration. You should really work to put this in as modular as possible. I'm sure you will find out. In the next image, you will see the effect you want and see the CIRCLED section for added or edited CSS.

enter image description here

+1


source


Add display:inline-block;

in both .button

and .cart-number

. It tells the elements to position themselves on the same line, and hopefully with this method you don't need to use float

.



0


source






More articles:


All Articles