Set nav bar to the right

Question

so i am trying to imitate googles search page. I want to move the navbar to start on the TOP right. So that would be the 'Image and advanced search' buttons.

It always starts top left which I understand. but when I use the 'float:right' inside the CSS it moves to the right, but then drops lower to be inline with the google logo image. I want it to stay top right.

I can't post images yet because of my reputation score.

.nav {
  padding: 10px;
  margin-right: 25px;
  float: right;
}

.logo {
  padding: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

<nav class="nav">
  <div class="index">
    <a href="image.html">Images</a>
  </div>
  <a href="advanced.html">Advanced search</a>
</nav>

<div class="logo">
  <img src="https://placekitten.com/50/50" alt="Google search">
</div>

I tried using float: right. It moved the navbar right but also inline with the logo and not top right. I tried using margins

About your `src="google logo.png"`, [href syntax : is it okay to have space in file name](https://stackoverflow.com/questions/4172579/href-syntax-is-it-okay-to-have-space-in-file-name) — Cédric, Nov 02 '22 at 10:17

score 0 · Accepted Answer · edited Nov 05 '22 at 15:24

Instead of using float I wrote:

position: absolute;
right: 0px;
top: 0px;

And the nav is fixed to top right corner. I think this is what you wanted.

.nav {
  position: absolute;
  padding: 10px;
  right: 0px;
  /* change back to 25px if you want */
  top: 0px;
}

.logo {
  width: 30%;
  padding: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}

<nav class="nav">
  <div class="index">
    <a href="image.html">Images</a>
  </div>
  <a href="advanced.html">Advanced search</a>
</nav>

<div class="logo">
  <img src="google logo.png" alt="Google search">
</div>

Thanks, man, really appreciate it. It is looking how I want it to now — check123, Nov 02 '22 at 12:23

score 0 · Answer 2 · answered Nov 02 '22 at 10:30

Change Html Code

<div class="mainDiv"
   <nav class="nav">
       <div class="index">
          <a href="image.html">Images</a>      
       </div>   
       <a href="advanced.html">Advanced search</a>
    </nav>
          
    <div class="logo">
       <img src="google logo.png" alt="Google search">
     </div>
</div>

Change CSS

.mainDiv{
  width: 100%;
}
.nav {
  padding: 10px;
  margin-right: 25px;
  float: right;
}
.logo {
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  width:30%;
}

Set nav bar to the right

2 Answers2