How to make box container expand when text-field does?


Tags: html,css,html5,css3

Problem :

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:

a

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

s

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.



Solution :

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

    CSS Howto..

    How to assign margin to child div to not float out of the parent div?

    How to align div elements while using css tables

    CSS: How to make the padding-right between li even?

    show/hide div on click

    How do I get responsive images to stay equivalent heights as they scale?

    How to display sub sub menu to the left side using CSS?

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How to define a set of CSS class names so Vim knows how to autocomplete

    How to change text color of a css class?

    CSS: How to create a lines or dots over a background image? [closed]

    How does google do the barrel roll?

    How do stop elements from changing (properties) during javascript events?

    How to align two columns of text in CSS

    How to Display this CSS List using Class

    How to put banner in css?

    How to make a box expand a distance from the sides

    How to draw heart using HTML/CSS table?

    How to centre a table in html using css file? [duplicate]

    css div and span display differently in browsers. How to unify?

    Show Div When Click Link Button

    How to find out an element with id partially matched, and change its css style?

    Css selector : How to reference a attribute inside a div

    how to make Sections in one line?

    How to Remove CSS line-through

    How do I add CSS (transition) to an item from a SVG file? [duplicate]

    Sencha Touch 2 date picker component & css: how to display hidden column names?

    Finding how many letter div fit

    Bootstrap “jumbotron-narrow” example. how does the style change?

    CSS, how to add picture in the corner of every columns

    How to get a CSS selector in PHP?