ширина: 50% не работает как ожидалось

Question

Я пытаюсь получить каждую секцию ширины экрана 50%, но раздел купонного кода не работает. Я не уверен, что это мой HTML или CSS? Просто отредактирован, чтобы добавить остальную часть моего HTML!

Пример:

HTML

<div class="CartCode cf"> 
    <div class="CouponCode"> 
      <h3>Coupon Code</h3> 

     <script type="text/javascript"> 
      lang.EnterCouponCode = "Please enter your coupon code."; 
     </script> 
     <form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post"> 
      <input type="hidden" name="action" value="applycoupon"> 
      <div class="CouponCode"> 
       <p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p> 
       <input type="text" name="couponcode" id="couponcode" class="Textbox Field100"> 
       <input type="submit" value="Go" class="btn"> 
      </div> 
     </form> 
    </div> 
    <div class="GiftCertificate"> 
      <h3>Redeem Gift Certificate</h3> 

     <script type="text/javascript"> 
      lang.EnterGiftCertificateCode = "Please enter your gift certificate code."; 
     </script> 
     <form onsubmit="return Cart.CheckGiftCertificateCode()" action="http://www.glyndebourneshop.com/cart.php" method="post"> 
      <input type="hidden" name="action" value="applygiftcertificate"> 
      <div class="GiftCertificateCode"> 
       <p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p> 
       <input type="text" name="giftcertificatecode" id="giftcertificatecode" class="Textbox"> 
       <input type="submit" value="Go" class="btn"> 
      </div> 
     </form> 
    </div> 
</div> 

CSS

.cf:after { 
    content:""; 
    display: table; 
    clear: both; 
} 
.CartCode .CouponCode, .CartCode .GiftCertificate { 
    float: left; 
    width: 50%; 
} 

Answer 1

У вас есть 2 классов COUPONCODE здесь:

<div class="CouponCode">//1st coupon code 
      <h3>Coupon Code</h3> 

     <script type="text/javascript"> 
      lang.EnterCouponCode = "Please enter your coupon code."; 
     </script> 
     <form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post"> 
      <input type="hidden" name="action" value="applycoupon"> 

      <div class="CouponCode">//here is the 2nd 

       <p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p> 
       <input type="text" name="couponcode" id="couponcode" class="Textbox Field100"> 
       <input type="submit" value="Go" class="btn"> 
      </div> 
     </form> 
    </div> 

Удалить 2-го класса муравей, он должен работать, как здесь:

<div class="CouponCode"> 
       <h3>Coupon Code</h3> 

      <script type="text/javascript"> 
       lang.EnterCouponCode = "Please enter your coupon code."; 
      </script> 
      <form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post"> 
       <input type="hidden" name="action" value="applycoupon"> 

       <div> 

        <p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p> 
        <input type="text" name="couponcode" id="couponcode" class="Textbox Field100"> 
        <input type="submit" value="Go" class="btn"> 
       </div> 
      </form> 
     </div> 

Here приведен пример кода.