Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div>
- <span>some dynamic text</span>
- <input type="text" />
- </div>
- <div class = "container">
- <div class = "text">Glee is awesome!</div>
- <div class = "inputtext"><input type="text" /></div>
- </div>
- .container {
- display: table;
- width: 100%; /*how much should both the text and the input take*/
- }
- .container .text {
- white-space: nowrap;
- display: table-cell;
- width: 1px; /*make sure it's only as wide as needed*/
- }
- .container .inputtext {
- display: table-cell;
- }
- .container input {
- width: 100%; /*let the input take all available space*/
- }
- <div class = "text">Glee is awesome!</div>
- <div class = "inputtext"><input type = "text" /></div>
- .text {
- float: left;
- }
- .inputtext {
- overflow: hidden; /*this is the key here*/
- }
- input {
- width: 100%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement