CODEWITHSUNDEEP
htmlcss
Alistair
Alistair

Reputation: 491

width:50% not working as expected

I'm trying to get the each section 50% width of the screen but the Coupon Code section isn't working. I'm not sure if it is my HTML or CSS? Just edited to add the rest of my HTML!

Example:

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%;
}

Upvotes: 1

Views: 543

Answers (1)

Florin Pop
Florin Pop

Reputation: 5135

You have 2 classes of CouponCode here:

    <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>

Remove the 2nd class ant it should work, like here:

<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 is the example code.

Upvotes: 7

Related Questions