Margins, positions, text-align and float

Question

Think we have a header and with some content on it

<header>
<div id="container">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
<div class=search>
<input type=text placeholder="Find something...">
</div>
</div>
</header>

we have a logo and a navigation menu and a search input

we want the logo to be on the right side of the page and search input on the left side of the page

and the navigation menu also on the right side near the logo but with some distance

how can we move the divs?

with float right we can move the logo to the right side

with float left we can move the search input to the left side

but should we use margins or positions to move the navigation menu to where we want?

All I want to know is that I wanna be able to move elements with CSS In a professional way

I know we have a lot of ways to just move elements but I want the best way as fast as the professional web developers do

Answer 1

If you want to move them ie animation use @keyframes rule. There was marqui tag but it is now removed in HTML5

Answer 2

I don't wanna use animations
You didn't understand me
I just wanna move them in a static way
like left 20px top 10px right 0px bottom 0
we can use position and margins or maybe other properties
but I'm confused to use which one I wanna be able to put anything that I want in anywhere
and this is hard for me to decide that where I should use margins or where should I use position and so on and son forth