如何使用变化的数据和页脚来调整其内容大小的边界

Question

I am creating a checkout system and I have a section called order confirmation. What this does is displays a brief summary of the products added to the cart. So the size will vary per order. I have a border around this section and the issue I am running into is that if there are over two products the products start falling outside of the border. I have tried to make the div that contains the border to have a relative position, but it seems the border stays fixed. I have the border set to a height, so I'm not sure if this is causing it to not adjust, but I need it set to a minimum height.

This is the html source code for it:

<div class="checkoutconfirmationcontainer">
    <div name="product_id">                                                       </div>
        <div class="orderconfirmdisplay">
            <span class="tealmedium">1 - Baseball</span><br><br><br>        
        <div class="floatleft"><div class="smallerimgcontainercheckout">
            <img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br>                                                     </div></div>
        </div>
        <div class="checkoutitemsummary">
            <a href='./viewProduct.php?view_product=12'>Baseball </a>
                <p><span class="redprice">$10<br />                                                  </div>
        <div class="orderconfirmdisplay">
            <span class="tealmedium">1 - Lakers Hat</span><br><br><br>      
        <div class="floatleft"><div class="smallerimgcontainercheckout">
            <img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br>                                                     </div></div>
        </div>
        <div class="checkoutitemsummary">
            <a href='./viewProduct.php?view_product=11'>Lakers Hat </a>
                <p><span class="redprice">$25<br />                                                 </div>
        <div class="orderconfirmdisplay">
            <span class="tealmedium">4 - Steamer Trunk</span><br><br><br>       
        <div class="floatleft"><div class="smallerimgcontainercheckout">
            <img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br>                                                     </div></div>
        </div>
        <div class="checkoutitemsummary">
            <a href='./viewProduct.php?view_product=10'>Steamer Trunk </a>
                <p><span class="redprice">$200<br />                                                    </div>
            <div class="orderconfirmdisplay">
                <span class="tealmedium">4 - Best Tennis Ball</span><br><br><br>        
            <div class="floatleft"><div class="smallerimgcontainercheckout">
                <img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br>                                                     </div></div>
            </div>
            <div class="checkoutitemsummary">
                <a href='./viewProduct.php?view_product=17'>Best Tennis Ball </a>
                <p><span class="redprice">$15<br /></span></p>
            </div>

            <input type="hidden" name="token" value="967ee4057c86e74fa799c7f569d6a127">
            <input class="widebutton placefinalorder" name="btnSubmit" id="btnSubmit" type="submit" value="Place Your Order">
        <input type='hidden' id='AuthorrizeResponseText' name='AuthorrizeResponseText' value='' />

                <br>
            </div>

This is the CSS for the main part of this section.

.confirmationinfocontainer {
    width: 61%;
    border: 1px solid #E6E6E6;
    height: 450px;
    float: left;
    position: relative;
    margin-bottom: 200px;
    padding: 15px;
}

Then my footer does not adjust to this?

.footerOut {
    width: 100%;
    background-color: #202020;
    position: relative;
    padding-top: 30px;
    left: 0px;
    right: 0;
    margin-bottom: 0px;
    margin-top: 20px;
    bottom: 0px;
    clear: both;
}
.footer {
    height: 420px;
    width: 960px;
}

I am not sure what I am doing wrong so that my page will adjust. If it makes it easier, my site is buyfarbest.com. If you had 4 products to the cart and go to the Order Confirmation part of my checkout, it may easier to see what I mean. There is a test card number saved in the html, so just put in a future date for the expiration date and it will let you advance.

Answer 1

Ok, give min-height instead of height to the wrapper for which you have border and add a property overflow: hidden;

.confirmationinfocontainer{   //your warpper div
      min-height: 450px;
      overflow: hidden;
}