CODEWITHSUNDEEP
htmlcss
Saram
Saram

Reputation: 1510

INPUT auto fill rest of container width

I'm looking for the trick to expand my input field to all avaliable space of container but not over folowing element. I prepared example witch looks ok in chrome only. FF looks quite ok, but no result in IE.

I have container DIV with INPUT and text (SPAN) in one line. Text can be changed (e.g. translated) so i do not know text width. In my example i used display: table-cell, please look my example.

+----container---------------------------+
|+---input----------------++--text------+|
||                        ||            ||
|+------------------------++------------+|
+----------------------------------------+

Upvotes: 1

Views: 470

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

I've made this from complete scratch

Demo

<div class="container">
    <label>Demo</label>
    <span><input type="text" /></span>
</div>

CSS

#container {
    display: table;
    width: 100%;
}

label, span {
    display: table-cell;
}

span {
    width: 100%;
    padding: 5px;
}

input {
    width: 100%;
}

Upvotes: 1

Related Questions