Get a textbox to fill 100% of the width of its container div

Question

I have a form, in which there's a textbox followed by a submit button in the same row.

I'd like the submit button to be a little small but the textbox to take up all of the remaining width.

So, I'd like to just stretch the textbox to fill all the width but for the width required by the button.

However, at present, my UI looks like so:

Notice all the empty horizontal space between the textbox and the button.

I have tried setting the width of the textbox to 100% in the CSS but nothing happens.

Below is my HTML.

<div class="row" id="rowFormContainer">
    <form id="frm">
        <div id="divUserURLContainer" class="col-md-10">
            <input type="text" 
                   id="txtUserURL" 
                   placeholder="Stack Overflow URL" />
        </div>

        <div id="divGetButtonContainer" class="col-md-2">
            <input type="submit" value="Get" class="btn btn-success"/>
        </div>
    </form>

</div>

As you may observe, I am using the bootstrap classes row and md-col-x in order to define the layout of the container divs . I'd like the input control that reresents my textbox to fill 100% of the width of its container div .

And this is my CSS:

#rowFormContainer {
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 10px;

    border-width: 2px;
    border-style: dashed;
}

#divUserURLContainer {
    border-width: 2px;
    border-style: solid;
    border-color: red;

    padding: 0px;
}

#txtUserURL {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: cadetblue;
    font-size: 22px;

    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    padding-bottom: 4px;

    border-radius: 7px;
    width: 100%;
}

Answer 1

You can simply use flex like this :

 form { display: flex; } input[type="text"] { flex: 1 } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div id="rowFormContainer"> <form id="frm"> <input type="text" id="txtUserURL" placeholder="Stack Overflow URL" /> <input type="submit" value="Get" class="btn btn-success" /> </form> </div> 

Answer 2

You are not using the native bootstrap functionality correctly - by adding the class - "form-control" to your input you will achieve the full width input - without resorting to flex. Note that I have the .form-group wrapper and added a label - it is good practise to include a label with your inputs - and thee "control-label" class on that allows bootstrap to color it red if there is an error (and the ".has-error" class is applied to the form group.

I have added borders around the two divs. Not that there is padding within the div - because that is natural 15px padding of divs that bootstrap provides - not be cause the input does not extend the full width.

And following the craziness inspired by comments - I have removed padding to show the implications of such an action - simply by removing the left and right padding - I do not think this is very desirable - but I accept that the OP asked for the full width of the div. However crazy that is.

Note that due to the size of the nsnippet editor - i had to make it col-xs-10 / col-xs-2 - but the same premise holds up through the viewport breakpoints.

  <div id="divUserURLContainer" class="col-md-10">
    <div class="form-group">
      <label class="control-label" for="txtUserURL">Label text</label>
      <input type="text" class="form-control" id="txtUserURL" placeholder="Stack Overflow URL" >/>
    </div>
 </div>

 #divGetButtonContainer { padding-top:24px; padding-bottom: 16px; } #divUserURLContainer, #divGetButtonContainer { border: solid 1px red; padding-left:0; padding-right:0; } #divGetButtonContainer{ border-color: blue; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="divUserURLContainer" class="col-xs-10"> <div class="form-group"> <label class="control-label" for="txtUserURL">Label text</label> <input type="text" class="form-control" id="txtUserURL" placeholder="Stack Overflow URL"/ > </div> </div> <div id="divGetButtonContainer" class="col-xs-2"> <input type="submit" value="Get" class="btn btn-success"/> </div>