How do I make an input element occupy all remaining horizontal space?
See: http://jsfiddle.net/thirtydot/rQ3xG/466/
This works in IE7+ and all modern browsers.
.formLine {
overflow: hidden;
background: #ccc;
}
.formLine input {
width: 100%;
}
.formLine label {
float: left;
}
.formLine span {
display: block;
overflow: hidden;
padding: 0 5px;
}
.formLine button {
float: right;
}
.formLine input, .formLine button {
box-sizing: border-box;
}
<div class="formLine">
<button>click me</button>
<label>some text.. </label>
<span><input type="text" /></span>
</div>
Make an input take up all the remaining space
Try splitting the yellow <td>
into its own table (or other elements using display: table-cell
, etc).
Set the width of the cell containing the input to 100%, and set the max-width of the table to 100%.
That will cause the table inside the cell to re-flow when the text changes.
Basic demo:
http://plnkr.co/edit/ao4at9RHg8VgRrgtmTqu?p=preview
Style input element to fill remaining width of its container
as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell
<div style="width:300px; display:table">
<label for="MyInput" style="display:table-cell; width:1px">label text</label>
<input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>
How to make a div fill a remaining horizontal space?
This seems to accomplish what you're going for.
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Have an element fill remaining horizontal space
One approach is to use flexbox:
div {
display: flex;
}
div input {
flex: 1;
}
<div class="name-field">
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div class="email-field">
<label for="email">Email address:</label>
<input type="email" id="email" />
</div>
Make input to fill the remaining width of label
Try Flexbox
label {
display: flex;
}
input {
flex: 1;
}
<label>name:
<input type="text" />
</label>
Make div occupy remaining width of parent
First of all, try avoiding float, it's quite messy.
In order to achieve the 'two items on one line' trick, you need to know to set the width of your button, and tell the input to take the remaining space with the calc() CSS attribute.
input {
display: inline-block;
width: calc(100% - 100px);
}
button {
width: 100px;
margin: 0;
display: inline-block
}
div {
width: 100%;
}
Check out this flexbox guide as well, it's very informative on how to place objects!
Good luck!
Getting an input to fill remaining width like a span element
This should do the trick for you:
css
.a {
display:table-cell; background-color:red;
}
.b {
display:table-cell; background-color:green; width:100%;
}
.c { width:100%; }
html
<div>
<span class="a">something</span>
<span class="b">fill the rest</span>
</div>
<div>
<span class="a">something</span>
<span class="b"><input class="c" value="fill the rest" /></span>
</div>
jsfiddle : http://jsfiddle.net/FKZUA/55/
Make a div fill up the remaining width
Try out something like this:
<style>
#divMain { width: 500px; }
#left-div { width: 100px; float: left; background-color: #fcc; }
#middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#right-div { width: 100px; float: right; background-color: #ccf; }
</style>
<div id="divMain">
<div id="left-div">
left div
</div>
<div id="right-div">
right div
</div>
<div id="middle-div">
middle div<br />bit taller
</div>
</div>
divs will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.
Note that the "middle div" goes after the "right div" in the HTML
Related Topics
Set Maxlength in HTML Textarea
How to Properly Display German Characters in HTML
Height of Flex Container Not Working Properly in Safari
Convert Attributed String, To, "Simple" Tagged HTML
How to Change Bootstrap Select Arrows to Glyphicon
Google Chrome - Rendering Differences When Zooming In/Out
How to Vertically Align a <Table> in the Middle of a Fixed Height <Div>
How to Disable the Spell Checker on Text Inputs on the Iphone
Flexbox with Fixed Header and Footer and Scrollable Content
CSS Filter:Invert Not Working with Background-Color
Html/CSS Hack to Allow Overflow-X: Auto & Overflow-Y: Visible