2

I'm trying to make a search box on left end and arrows on right end. Float is not working and the arrows are coming very close to search box. Also tried left:0px and right:0px. Could anyone help with this? Thank you.

.candidate {
  display: flex;
  width: 100%;
}

.candidate-search {
  width: 50%;
  float: left;
}

.pagearrow {
  display: flex;
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="col-xl-7 col-lg-7 col-md-7">
  <div class="conatiner-fluid">
    <div class="row">
      <div class="candidate">
        <div class="candidate-search">
          <input class="filter-searchbox py-2" type="search" name="search" placeholder="Search" />
        </div>
        <div class="pagearrow">
          <span class="material-icons">arrow_back_ios</span>
          <span class="material-icons">arrow_forward_ios</span>
        </div>
      </div>
    </div>
  </div>
</div>
Rana
  • 2,500
  • 2
  • 7
  • 28
Sreehari Avikkal
  • 305
  • 2
  • 15
  • 2
    Float has no effect of flex items. – Alohci Oct 27 '21 at 07:38
  • 1
    you use flexbox so float don't work in this case, just read about flex in the bootstrap guide – Sfili_81 Oct 27 '21 at 07:41
  • I would recommend against using float unless specific use cases. Flexbox is so much powerful. I'll say it out loud: you don't need float anymore. – avia Oct 27 '21 at 07:50

1 Answers1

3

Float property is not working on flex box property. You can try to use justify-content to align elements

Example:

justify-content: space-between;
huykon225
  • 563
  • 5
  • 17