Question

This seems like a simple problem – I have the following html

    <div class="question" id="someQuestionId">
    <input type="text" disabled="disabled" class="creation"/>
</div>

and the following CSS-

.creation{
    height:75%;
}
.creation,textarea{
    background-color:#F2FBEF;
}
.question{
    width:150px;
    height:100px;
    background-color:#0B3B24;


}

However, the width of the input box is less than that of the div within which it is contained – why is that occurring? I thought that the width should have been inherited?

Answer 1

input is an inline element (inline-block actually). It doesn’t inherit its width from its parent, but has a browser-specific default width instead.

Change the CSS:

.creation{
    height:75%;
    /* Either: */
    width: 100%;
    /* or */
    display: block;
}