Issues aligning elements left and right on same line - html

Question

I have two divs at the moment that I'm wanting to float on left and right sides however they are both kinda sticking to each other and can't seperate them..
html:
<nav>
<div id="nav_content">
<div id="home_icon" />
<div id="search_icon" />
</div>
</nav>
So I'm trying to float the home_icon to left and search_icon to right:
CSS
nav
{
background:white no-repeat;
width:75%;
height:5em;
margin-left:8em;
}
#nav_content
{
width:100%;
height:100%;
clear:both;
position:relative;
display:inline-block;
float:left;
}
#home_icon
{
background:url(../images/home.png) no-repeat;
width:50px;
height:50px;
top:50%;
position:relative;
transform: translateY(-50%);
transition:ease-in-out 0.5s;
margin-left:1em;
float:left;
display:inline-block;
}
#search_icon
{
background:url(../images/searchicon.png) no-repeat;
width:40px;
height:40px;
top:50%;
transform:translateY(-50%);
transition:ease-in-out 0.5s;
float:right;
display:inline-block;
position:relative;
}

Answer 1

You can't do
<div id="home_icon" />
<div id="search_icon" />
in HTML 5. Because it means the same as
<div id="home_icon">
<div id="search_icon">
which makes the browser think that #search_icon is inside #home_icon.
So, either set the DocType to XHTML or close the divs properly.
Related Question - Are (non-void) self-closing tags valid in HTML5?
jsFiddle - http://jsfiddle.net/9vd01zx5/

Answer 2

You are using wrong HTML closing tags
use:
<div id="home_icon">Left</div>
<div id="search_icon">Right</div>
Remove the text left and right later..