How to align these two elements in this position in HTML? - html

Question

I have two elements which I want to align this way on Top Bar :
Below you can see the HTML and CSS for the two of the elements:
I tried using margins or padding but it didn't look I was going anywhere like that.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>

Answer 1

Did you try using right?
First change float: left; in your two CSS classes (input field and button) to float: right;.
This way, the input field and the button are next to each other on the right side.
Then you can move your "right-floated" elements using:
right: 50px;, for isntance.

Answer 2

You could have use flex system layout to make it easier, but to do this in the way it is we should change couple of things:
Change order of div.example and the div that contains new location button in html
Set float: right to both div.example and the other div
Set margin-right: 50px to second div
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
/* NEW */
float: right;
/* Endof NEW */
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<!-- Changed order -->
<div style="float:right;margin-right:50px;">
<button type="button">+ New location</button>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<!-- Endof change -->
</div>

Answer 3

I changed order of elements, add a little margin and float right to the first element.
<div>
<div class="topnav" style="margin-right: 100px;">
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
</div>

Answer 4

It's better to use flex and/or multi-column presentation, but with your current html-structure, one of the simplest options would be to add the second button to the "example" div and to use separated classes for buttons.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border: 1px solid grey;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example .button--search {
border-left: none;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
width: 50px;
}
.example .button--new-location {
margin-left: 15px;
border-radius: 6px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button" class="button--search"><i class="fa fa-search"></i></button>
<button type="button" class="button--new-location">+ New location</button>
</div>
</div>
</div>