Set nav bar to the right-CodePudding

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 >
  <div >
    <a href="image.html">Images</a>
  </div>
  <a href="advanced.html">Advanced search</a>
</nav>

<div >
  <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

CodePudding user response：

Change Html Code

<div 
   <nav >
       <div >
          <a href="image.html">Images</a>      
       </div>   
       <a href="advanced.html">Advanced search</a>
    </nav>
          
    <div >
       <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%;
}

CodePudding user response：

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 >
                <div >
                   <a href="image.html">Images</a>      
                </div>   
                <a href="advanced.html">Advanced search</a>
            </nav>
          
        <div >
            <img src="google logo.png" alt="Google search">
        </div>