CODEWITHSUNDEEP
htmlcss
Kamilski81
Kamilski81

Reputation: 15107

How do I get my search bar to fill remaining 100% horizontal div space?

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

Search bar to span across the 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%;
  }

enter image description here

Upvotes: 2

Views: 1041

Answers (2)

Eli Stone
Eli Stone

Reputation: 1555

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.

Upvotes: 1

Pete
Pete

Reputation: 58422

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>

Upvotes: 3

Related Questions