Question

I am trying to make my text-fields expand when the container does. This is a picture of my container along with my text fields:

Now when I expand the Product Link text-field it results to this:

When it should be making the box bigger in height. This is my css I am using for the container and text-fields:

CSS

/* UserPrice Container & Fields */
#user-price-container {
    background:#FFFFFF;
    border:black solid 1px;
    font-family:Arial, Helvetica, sans-serif;
    margin-top:5px;
    width: 950px;
}
.user_price_labels {
    margin-left:5px;
    font-weight:bold;
    color:#78AF00;
}
.user-price-fields {
    font-family:Arial, Helvetica, sans-serif;
    border-right: 1px solid #90BF22;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #FFFFFF, 0 1px 1px rgba(0, 0, 0, 0.17) inset;
    color: #333333;
    font-size: 13px;
    -moz-box-sizing: border-box;
    background: #FFFFFF;
    border-color: black;
    border-radius: 1px 1px 1px 1px;
    display: inline-block;
    height: 25px;
    padding-left: 8px;
    margin-left:5px;
}
/* Individual Text-fields*/
#user-price-price, #user-price-product, #user-price-exact-url {
    margin-top:-2px;
}
#user-price-product-container {
    margin-top:5px;
    margin-left:5px;
}
#user-price-price-container {
    margin-top:5px;
}
#user-price-product-store-container {
    margin-top:-14px;
    height:35px;
}
#user-price-exact-url-container {
    margin-left:44px;
    margin-top:-14px;
    height:35px;
}

HTML(960gs)

<div id="user-price-container" class="grid_24">

    <p id="user-price-product-container" class="grid_12"><label class="user_price_labels" for="user_prices_0_product_name">Product*</label><br />
        <input class="user-price-fields" data-autocomplete="/prices/autocomplete_product_name" id="user-price-product" name="user_prices[0][product_name]" size="60" type="text" /></p>

     <p id="user-price-price-container" class="grid_4"><label class="user_price_labels" for="user_prices_0_price">Price*</label><br />
        <input autocomplete="off" class="user-price-fields" id="user-price-price" name="user_prices[0][price]" placeholder="00.00" size="10" type="text" /></p>

     <p id="user-price-product-store-container" class="grid_11"><label class="user_price_labels" for="user_prices_0_product_store">Location*</label><br />
        <input class="product_store" id="user_prices_0_product_store" name="user_prices[0][product_store]" size="30" type="text" /></p>

     <p id="user-price-exact-url-container" class="grid_9"><label class="user_price_labels" for="user_prices_0_exact_url">Product Link</label><br />
        <textarea class="user-price-fields" cols="40" id="user-price-exact-url" name="user_prices[0][exact_url]" rows="20"></textarea></p>
</div>

How can I get it to expand dynamically in width?

Thank you for taking the time to read this.

Answer 1

Remove the height from this class and I think it will work, maybe change it to min-height instead of removing it.

#user-price-exact-url-container {
    margin-left:44px;
    margin-top:-14px;
    height:35px;
}