Невозможно поместить div на ту же строку, что и в вертикальном меню (другой div)

Question

Я хочу поместить div на ту же строку, что и в меню, но он всегда находится внизу меню, и его подталкивает другой div , Пространство: абсолютный идентификатор #slider не помог.

Jsfiddle

HTML

<div id=wrap> 
<nav> 
    <ul> 
    <li class="var_nav"> 
    <div class="link_bg"></div> 
    <div class="link_title"> 
     <div class="icon"> 
     <i class="fa fa-home fa-2x"></i> 
     </div> 
    </div> 
    </li> 
    </ul> 
</nav> 

Я пытался поместить дисплей собственности, попытался изменить поплавки ничего не помогало и не мог найти что-то подобное, как это в Интернете. CSS

ul 
{ 
margin:0px; 
padding:0px; 
list-style-type:none; 
-webkit-backface-visibility: hidden; backface-visibility: hidden; 

} 
.var_nav 
{ 

position:relative; 
width:300px; 
height:70px; 
margin-bottom:5px; 
background-color: #fff; 
} 
.link_bg 
{ 
width:70px; 
height:70px; 
position:absolute; 
background:#373541; 
z-index:2; 
} 
.link_bg i 
{ 
position:relative; 
} 
.link_title 
{ 
position:absolute; 
width:100%; 
z-index:3; 
color:#bc7c45; 
} 
.link_title:hover .icon 
{ 
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-o-transform:rotate(360deg); 
-ms-transform:rotate(360deg); 
transform:rotate(360deg); 
} 
.var_nav:hover .link_bg 
{ 
width:100%; 
background:#373441; 
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
-ms-transition: all 0.3s ease-in-out; 
transition: all 0.3s ease-in-out; 
} 
.var_nav:hover a 
{ 
font-weight:bold; 
-webkit-transition:all .5s ease-in-out; 
-moz-transition:all .5s ease-in-out; 
-o-transition:all .5s ease-in-out; 
-ms-transition:all .5s ease-in-out; 
transition:all .5s ease-in-out; 
} 
.icon 
{ 
position:relative; 
width:70px; 
height:70px; 
text-align:center; 
color:#bc7c45; 
-webkit-transition:all .5s ease-in-out; 
-moz-transition:all .5s ease-in-out; 
-o-transition:all .5s ease-in-out; 
ms-transition:all .5s ease-in-out; 
transition:all .5s ease-in-out; 
float:left; 
} 
.icon i{top:22px;position:relative;} 
a{ 
display:block; 
position:absolute; 
float:left; 
font-family:arial; 
font-size: 18px; 
color:#bc7c45; 
text-decoration:none; 
width:100%; 
height:70px; 
text-align:center; 
} 
span 
{ 
margin-top:25px; 
display:block; 
} 
#slider 
{ 
    background:#373441; 
    width: 1000px; 
    height: 550px; 
    float: right; 
} 

Answer 1

Вы хотите получить #slider рядом с Nav?

Просто добавьте класс как around_nav к нав тегу:

.around_nav 
{ 
    float: left; 
} 

Обновлено fiddle

Answer 2

Использование гибкого:

#wrap { 
    width: 1500px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: row; 
} 

И удалить все свойства позиционирования отовсюду!

https://jsfiddle.net/eupayxu8/2/