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

Answer 1

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>