How to align elements in navbar right without using float? - css

Question

I have a navigation bar with 3 sections:
A logo
A search bar
A couple of menu options grouped together
I want it to look something like this where the logo is aligned left, the search bar has a left padding, and the grouped links are on the right:
If I try to float the group to the right, they don't vertically align to the middle.
<nav>
<a class='logo-link' href="#">Example</a>
<div class="search">
<form accept-charset="UTF-8" action="/search" method="get">
<div style="margin:0;padding:0;display:inline"></div>
<input class="main_search" type="text" />
<input class="inline_search" type="submit" value="Search" />
</form>
</div>
<div>
<div class="anchorLink">
Blog
</div>
<div class="anchorLink">
Login
</div>
<div class="anchorLink">
Register
</div>
</div>
</nav>
I've attached a fiddle of an example.

Answer 1

You could either use
text-align:justify; + display:inline-block; DEMO, you can then use : vertical-align:middle; to align your element to each other's middle DEMO bis
or
display:flex; + justify-content:space:between; DEMO2 You can then use margin:auto; to center on both axis DEMO3

Answer 2

You can use display properties, Try display:inline-block instead float and Set .search class style like this:
CSS
.search {
margin: 0 auto;
max-width: 90%;
padding-top: 0;
display: inline-block;
padding-left: 10em; /* Reduce padding
font-size: 0.75em;
}
Added CSS class
.nav--list{
display:inline-block;
}
Fiddle Example

Answer 3

Efficient way to do this:
Html:
<div id="header">
<ul>
<li><div>logo area</div></li>
<li><div>search area</div></li>
<li><div>other area</div></li>
</ul>
</div>
CSS:
#header ul li{
list-style:none;
display: inline;
padding-left:20%;
}
Note:
Different "display" option would give you different decoration of your elements. Here, display:inline would make the display vertical.
Check the W3schools lessons here for further understanding: http://www.w3schools.com/css/css_display_visibility.asp

Answer 4

If you want to align your anchor-links to the right of your layout, you should
Align the logo and the search left
Align the option-links right
By the way: I suggest to use an unordered list instead of several divs for your links
HTML
<nav>
<div class="logo">
<a class="logo-link" href="#">Example</a>
</div>
<div class="search">
<form accept-charset="UTF-8" action="/search" method="get">
<input class="main_search" type="text" />
<input class="inline_search" type="submit" value="Search" />
</form>
</div>
<ul class="anchorLinks">
<li>Blog</li>
<li>Login</li>
<li>Register</li>
</ul>
</nav>
CSS
nav {
background-color:#EEE;
height:25px;
padding:10px;
}
.logo {
float:left;
padding-right:20px;
}
.search {
float:left;
}
ul.anchorLinks {
float:right;
margin:0;
padding:0;
list-style-type:none;
}
ul.anchorLinks li {
float:left;
padding:0px 5px;
}
See jsfiddle here