Menu
I have the following snippet:
<html>
<body>
<div style="width: 700px;">
<span>test</span>
<input style="width: 100%;"></input>
</div>
</body>
</html>
But this doesn't do what I want. I wanted that span and input together would account for 100% of the div i.e. that input would start right where the span ends and fill until the width of the div, without breaking to the next line. How do I do that?
936
If you need proper fluid width:
See: http://jsfiddle.net/kxEML/
CSS:
.inputContainer {
width: 300px;
border: 1px dashed #f0f
}
.inputContainer label {
float: left;
margin-right: 5px;
background: #ccc
}
.inputContainer div {
overflow: hidden;
}
.inputContainer input {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block
}
HTML:
<div class="inputContainer">
<label>test</label>
<div><input /></div>
</div>
Just set them so their width totals around 100% and float them next to each other. In your snippet, the input takes up 100% of the div, so the span has to go above it. In order for them to be able to wit on the same line, they have to have a total length of less than 100% or 700px to fit in the div. Setting the float property tell the browser to both make them as flush left as possible, and since they can fit, they end up next to each other on the same line. :D
<html>
<body>
<div style="width: 700px;">
<span style="width: 49%; float: left; background-color: blue;">test</span>
<input style="width: 49%; float: left; background-color: green;"></input>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
