CODEWITHSUNDEEP
csshtmlweb
awatan
awatan

Reputation: 1210

Only first input element inside div gets effected but not others

Here is my example from jdfiddle:

http://jsfiddle.net/7RT7a/

Here is html code:

              <div id="product-pack">
                <div name="productRow">
                    <div class="product-title-input">
                        <p class="titles">Product</p>
                        <input name="product" type="text" >
                    </div>
                    <div class="unit-title-input">
                        <p class="titles">Unit</p>
                        <input name="unit" type="text" >
                    </div>
                    <div class="quality-title-input">
                        <p class="titles">Qty.</p>
                        <input name="qty" type="text" >
                    </div>
                </div>

Here is CSS:

.product-pack {
    float: left;
    width : 96%;
}

#product-pack input {
    width: 95%;
    height: 1em;
    font-size:1em;
    font-weight:bold;
    border-style: solid;
    background-color:#CCC;
    border-color:#999;
    border-width:thin;
    padding: 1% 0 1% 0;
    margin-top: 0.5%;
}

#product-pack .product-title-input, .unit-title-input, .quality-title-input {
    float: left;
    text-align: left;
} 

#product-pack .product-title-input {
    width: 82.5%;
    padding-top: 2%;
}
#product-pack .unit-title-input {
    width: 5%;
    padding: 2% 1.5% 0 0;
}
#product-pack .quality-title-input {
    width: 5%;
    padding-top: 2%;
}

In jsfiddle result, you can see that effect of #product-pack input CSS selector only applies to first input element inside #product-pack and no matter what I try, the other two input elements get no effect.

Am I missing something with CSS or HTML? Any help would be appreciated.

Upvotes: 0

Views: 176

Answers (3)

Luminaire
Luminaire

Reputation: 334

You forgot to add </input> after <input>

Jsfiddle - as you can see here, all of the <input> boxes now are affected by the css styling (they turn yellow)

Upvotes: 0

gilly3
gilly3

Reputation: 91497

Padding percentages are calculated from the width of the containing block (per MDN). Use px or em instead to specify the padding.

Upvotes: 1

Chris Hawkes
Chris Hawkes

Reputation: 12410

If you're trying to get all the input's to be the same height you have padding differences between the input's parents. specifically here,

#product-pack .unit-title-input {
width: 5%;
padding: 2% 1.5% 0 0;
}

Upvotes: 0

Related Questions