2

On the webpage I am making, I want to add a search bar. I have a div container for the entire searchbar and I have a text input and a button inside of it. What i am trying to achieve is, that the text input fills out the entire parent div except for the search button.

Currently the HTML is this:

<div style="margin: 8px; margin-bottom: 32px; padding: 1px; background-color: #888; ">
    <input type="text" name="search" placeholder="Search..." style="padding: 14px; font-size: 16px;">
    <button type="submit" style="float: right; padding: 16px;">
        <i class='fa fa-search'></i>
    </button>
</div>

I tried entering "100%" in the width but that didn't work. I could use JS but im sure there is an easy, plain-html approach to this.

Ian Rehwinkel
  • 2,486
  • 5
  • 22
  • 56

1 Answers1

5

First of all, try avoiding float, it's quite messy. In order to achieve the 'two items on one line' trick, you need to know to set the width of your button, and tell the input to take the remaining space with the calc() CSS attribute.

input {
display: inline-block;
width: calc(100% - 100px);
}

button {
width: 100px;
margin: 0;
display: inline-block
}

div {
width: 100%;
}

Check out this flexbox guide as well, it's very informative on how to place objects!

Good luck!

Yan
  • 353
  • 1
  • 4
  • 13