Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them..
HTML:
<nav>
<div id="nav_content">
<div id="home_icon" />
<div id="search_icon" />
</div>
</nav>
I am attempting to float the home_icon to the left and search_icon to the 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;
}