No way to float right my input area in the nav bar - Why?

Question

I can't find a way to make my input field (a search box) and its relative icon (a magnifier lens) to float to the right of the navbar in my website (while leaving my logo on the left of the nav). Any suggestion?

HTML:

 <nav>
        <div class="nav-container">
            <div class="logo">
                <a href="">
                    <h1>MyWebsiteName.com</h1>
                </a>
            </div>
            <form action="javascript:redirect()" autocomplete="off">
                <input type="search" name="search" id="search" class="form-control">
                <ul class=mylist list-group" id="result"></ul>  <!--this line is for JS-->
                <button type="submit">
                   <svg width="50" height="50" viewBox="0 0 77 77" fill="none" 
                           xmlns="http://www.w3.org/2000/svg">
                   </svg> </button>
            </form>

        </div>
</nav>

CSS:


.nav-container {
  display: flex;
  align-items: center;
  padding: 16px 0;
  position: relative;
}
.nav-container form {
  display: flex;
  align-items: center;
  justify-content: center;
}
nav input {
  font-size: 1.20em;
  border: solid 2px #E5E5E5;
  border-radius: 25px;
  background: none;
  color: #F4F4F4; 
  padding: 14px;
  margin: 0 20px 0 0;
  width: 260px;
}
form {
  float: right;
}

May be.. we are not sure without seeing css done by you. – Manjuboyz May 24 '20 at 17:09 — Manjuboyz, May 24 '20 at 17:09
Sorry, added the CSS just now! @Manjuboyz – leowebdev May 24 '20 at 17:17 — leowebdev, May 24 '20 at 17:17
thanks for sharing the css and you have your answer :) – Manjuboyz May 24 '20 at 17:25 — Manjuboyz, May 24 '20 at 17:25

Johannes · Accepted Answer · 2020-05-24T21:15:24.463

Use margin-left: auto; on the form instead of float: right - it's inside a flex container (.nav-container), where float will not be effective, but margin-left: auto will move it as far right as possible.

.nav-container {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 0;
  position: relative;
}

.nav-container form {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav input {
  font-size: 1.20em;
  border: solid 2px #E5E5E5;
  border-radius: 25px;
  background: none;
  color: #F4F4F4;
  padding: 14px;
  margin: 0 20px 0 0;
  width: 260px;
}

form {
  margin-left: auto;
}

<nav>
  <div class="nav-container">
    <div class="logo">
      <a href="">
        <h1>MyWebsiteName.com</h1>
      </a>
    </div>
    <form action="javascript:redirect()" autocomplete="off">
      <input type="search" name="search" id="search" class="form-control">
      <ul class=mylist list-group " id="result "></ul>     <!-- this line is for JS -->
                <button type="submit ">
                   <svg width="50 " height="50 " viewBox="0 0 77 77 " fill="none " 
                           xmlns="http://www.w3.org/2000/svg ">
                   </svg> </button>
            </form>

        </div>
</nav>

That's great, thanks for the explanation! – leowebdev May 24 '20 at 18:26 — leowebdev, May 24 '20 at 18:26

Manjuboyz · Answer 2 · 2020-05-24T17:47:34.700

There are multiple ways to do it.

flexbox

grid

NOTE:

Due to space constraint in the snippet you have to view it in full screen.

I just used position:absolute; this will move your content towards right.

You can have a wrapper around those 2 input and use flex to keep those 2 items towards right.

Don't use float it has become old and it not very much flexible when you have your responsive design.

.nav-container {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 0;
  position: relative;
}

.nav-container form {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav input {
  font-size: 1.20em;
  border: solid 2px #E5E5E5;
  border-radius: 25px;
  background: none;
  color: #F4F4F4;
  padding: 14px;
  margin: 0 20px 0 0;
  width: 260px;
}

.moveRight {
  position: absolute;
  right: 10px;
}

<nav>
  <div class="nav-container">
    <div class="logo">
      <a href="">
        <h1>MyWebsiteName.com</h1>
      </a>
    </div>
    <form action="javascript:redirect()" autocomplete="off" class="moveRight">
      <input type="search" name="search" id="search" class="form-control">
      <ul class="mylist list-group" id="result"></ul>
      <!-- this line is for JS -->
      <button type="submit">
                   <svg width="50" height="50" viewBox="0 0 77 77" fill="none" 
                           xmlns="http://www.w3.org/2000/svg">
                   </svg> </button>
    </form>

  </div>
</nav>

Thank you, it works! :) I didn't know that float was considered old, what do you usually prefer for responsive design? — leowebdev, May 24 '20 at 17:42
Glad it works! the `position:absolute;` will works for your case and for the responsiveness since it keeps the those 2 controls towards right always. When you consider to do any responsive design especially layout design try using either `flexbox` or `grid` these 2 are really good towards responsiveness design, start exploring those it will give you very good information. — Manjuboyz, May 24 '20 at 17:46
I have added both `flexbox` and `grid` layout documentation which may help you further. happy coding. — Manjuboyz, May 24 '20 at 17:48

score 0 · Answer 3 · answered May 24 '20 at 17:23

0

Missing this

.nav-container {
justify-content: space-between;
}

answered May 24 '20 at 17:23

Scott

1
2

No way to float right my input area in the nav bar - Why?

3 Answers3