How can I move the search bar to the top? - html

Question

I am still learning CSS therefore the code may not exactly be perfect. I wanted to ask, how can I move the search bar to the top right corner? It displays below the main text and that does not look good. Any idea?
.container {
width: 900px;
margin: 0 auto;
}
.info {
font-family: "Comfortaa";
font-size: 1.3em;
margin-left: 4.06em;
}
.logo {
float: left;
margin-top: 1.25em;
}
.search-box {
float: right;
}
.vyhladavac {
width: 150px;
}
<header role="header" id="header">
<div class="container">
<img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
<p class="info">Spojená škola, Komárňanská 28, Nové Zámky s o. z. Stredná <br> priemyselná škola elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
</p>
<div class="search-box">
<input class="vyhladavac" type="text" name="" placeholder="Search">
</div>
</div>
</header>

Answer 1

To put two containers side by side, you can use display:flex on the parent container.
Therefore, I put the rest of your header into a div called headLeft, and the search div is the other container - allowing us to put display:flex on the parent container (which in your case is the .container div)
Flexbox is a very easy way to arrange containers side-by-side ("inline"), and it is also very useful for centering content both vertically and horizontally.
.container {
width: 900px;
margin: 0 auto;
display:flex; /* <==== ADDED */
border:1px solid red;
}
.headLeft{ /* <==== ADDED */ }
.info {
font-family: "Comfortaa";
font-size: 1.3em;
margin-left: 4.06em;
}
.logo {
float: left;
margin-top: 1.25em;
}
.search-box {
float: right;
}
.vyhladavac {
width: 150px;
}
<header role="header" id="header">
<div class="container">
<div class="headLeft">
<img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
<p class="info">Spojená škola, Komárňanská 28, Nové Zámky s o. z. Stredná <br> priemyselná škola elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
</p>
</div>
<div class="search-box">
<input class="vyhladavac" type="text" name="" placeholder="Search">
</div>
</div>
</header>
REFERENCE:
Must Watch 25min Flexbox tutorial - fast paced
Best Flexbox cheat sheet

Answer 2

.container{
position:relative;}
.search-box{
position:absolute;
right:0;
}

Answer 3

You can move the search box out of the layout by utilizing the position attribute. Setting its value to absolute will position the element absolutely in the window. Where the element is positioned can then be controlled using the top, bottom, left, or right attributes.
You may also need to move other elements on the page as elements with the absolute attribute are rendered on their own layer (that may be above existing elements).
.container {
width: 900px;
margin: 0 auto;
}
.info {
font-family: "Comfortaa";
font-size: 1.3em;
margin-left: 4.06em;
}
.logo {
float: left;
margin-top: 1.25em;
}
.search-box {
position: absolute;
top: 10px;
right: 10px;
}
.vyhladavac {
width: 150px;
}
<header role="header" id="header">
<div class="container">
<img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
<p class="info">Spojená škola, Komárňanská 28, Nové Zámky s o. z. Stredná <br> priemyselná škola elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
</p>
<div class="search-box">
<input class="vyhladavac" type="text" name="" placeholder="Search">
</div>
</div>
</header>

Answer 4

I'm not sure if this is what you're wanting. But give this a try. When I tested the code, It shifted the search bar to the top right of the page.
.search-box {
position: absolute;
right: 0px;
top: 0px;
}