CSS let input consume available width

I have the following markup as a base:

<div>
    <span>some dynamic text</span>
    <input type="text" />
</div>

I want the input to be displayed in a line with the text (which is always a single line but varying in length) and consume the available width according to the text length. the markup can be changed if required. both elements should be 100% of the parent element's width.

Answers


Two methods I can think of:
The first one:

You can simulate the behavior of a table using CSS;

HTML:

<div class = "container">
    <div class = "text">Glee is awesome!</div>
    <div class = "inputtext"><input type="text" /></div>
</div>

CSS:

.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*/
}

Little demo: little link.

The second one:

This method relies on floating:

HTML:

<div class = "text">Glee is awesome!</div>
<div class = "inputtext"><input type = "text" /></div>

CSS:

.text {
    float: left;
}
.inputtext {
    overflow: hidden; /*this is the key here*/
}
input {
    width: 100%;
}

Another little demo: little link.


Need Your Help

JAR file: Could not find main class

java executable-jar

Okay, I have a strange problem. I wanted to run one of my programs as a .jar file, but when I open it by double-clicking it, I get an error message like "Could not find main class, program is shutt...

ASP MVC Filters, where implement interface or not?

c# asp.net asp.net-mvc filter action-filter

Just wondering, googling around how to use filters in asp mvc 4. I have found some people defines them like this:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.