Home/ Questions/Q 6087855
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T11:55:04+00:00

I have the following snippet: <html> <body> <div style=width: 700px;> <span>test</span> <input style=width: 100%;></input>

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0