如何让我的搜索栏填充剩余的 100% 水平 div 空间？

Question

I would like my "Search by Name" #left div to extend the entire red area:

 #main { border: 1px solid black; font-size: 20px; font-weight: bold; color: white; } #left { width: 100%; background-color: red; } #center { float: right; width: 230px; background-color: blue; } #right { float: right; width: 45px; background-color: green; }

 <div id="main"> <div id="right"> <button name="button" type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </div> <div id="center"> <div class="dropdown bootstrap-select show-tick select-picker navbar-margins"> <select name="tag_id[]" id="tag_id_" class="select-picker navbar-margins" data-actions-box="true" data-selected-text-format="count > 1" data-title="No Tags Selected" data-deselect-all-text="Select None" multiple="multiple" tabindex="-98"></select> </div> </div> <div id="left"> <input type="text" name="q" id="q" placeholder="Search by Name or Contact Info"> </div> </div>

When I add the following to span my #q div then the element gets bumped down:

css:

#left #q {
    width: 100%;
  }

Answer 1

Stop using floats and use flex instead:

 #main { border: 1px solid black; font-size: 20px; font-weight: bold; color: white; display: flex; /* use this instead of floats */ } #left { flex-grow: 1; /* make this grow to fill remaining space */ } #left input { width:100%; /* optional - make the input fill the div */ } #center { width: 230px; background-color: blue; } #right { width: 45px; background-color: green; }

 <div id="main"> <div id="left"> <input type="text" name="q" id="q" placeholder="Search by Name or Contact Info"> </div> <div id="center"> <div class="dropdown bootstrap-select show-tick select-picker navbar-margins"> <select name="tag_id[]" id="tag_id_" class="select-picker navbar-margins" data-actions-box="true" data-selected-text-format="count > 1" data-title="No Tags Selected" data-deselect-all-text="Select None" multiple="multiple" tabindex="-98"></select> </div> </div> <div id="right"> <button name="button" type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </div> </div>

Answer 2

What has happened here is you have told the input inside left to be 100% of the red container, however the red container stretches all the way across the screen.

Then when you tell the input to also be 100% it hits into the other containers and drops down.

You could probably get this idea working by setting it to 85% instead of 100% but you will hit into issues every time you resize things.

A better way might be to look into a css property called flex. This allows you to do what you without having to set fixed values.