0

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;


}
sanoj lawrence
  • 951
  • 5
  • 29
  • 69
jn025
  • 2,755
  • 6
  • 38
  • 73

2 Answers2

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/

Community
  • 1
  • 1
Atif
  • 10,623
  • 20
  • 63
  • 96
0

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..

Gautam Sharma
  • 65
  • 1
  • 7