CODEWITHSUNDEEP
htmlcss
Cristi
Cristi

Reputation: 227

How can display these elements in line?

I have this site:

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

I put a picture to understand better what I want.I want to position these sights integral to be in line with the "in stock".

This is code HTML:

<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 resolve this with CSS?

I tried to add this CSS code, but unfortunately not working

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

Upvotes: 3

Views: 129

Answers (2)

Vinod Tigadi
Vinod Tigadi

Reputation: 859

this is not just an easy quick thing that you can get. There are much more things that need to changed. Let me see how far can I explain. Refer the attached images. For this, you should use the 'Chrome Dev Toolbar' or Firebug of Firefox, so that it helps.

First, the div block of your Wishlist button is completely outside the FORM element. So you can't make it inline, unless you move it inside the FORM element. See the 1st Image.

enter image description here

Now I have moved the DIV block of your Wishlist button inside the FORM element and have modified CSS for many classes and DIVs, definitely as INLINE, for demonstration. You need to really work hard to put this as modular as possible. I am sure you'll figure that out. In the next image, You'll see the effect as you wanted and see the CIRCLED section for the added or edited CSS code

enter image description here

Upvotes: 1

Luke
Luke

Reputation: 5076

Add display:inline-block; to both .button and .cart-number. It tells the elements to position themselves on the same line, and hopefully with this method you should't need to use float.

Upvotes: 0

Related Questions