Image displaying under navbar - html

Question

I'm trying to have an image next to my vertical navbar but it's being displayed under it.
This is how I'm doing it
body
{
font-family: 'Open Sans', sans-serif;
background-color: #333;
}
.element
{
display:inline-block;
float:left;
}
#wrapper
{
position:absolute;
height:100%;
width:200px;
bottom:0px;
background-color:#0F4D92;
}
nav
{
top: 50%;
margin-top: -75px;
position: fixed;
}
ul
{
list-style-type: none;
width: 200px;
height: 40px;
}
<div class="element" id="wrapper">
<nav>
<ul>
<li>Home</li>
<li>Withdraw</li>
<li>Deposit</li>
</ul>
</nav>
</div>
<img class="element" src="../bg.jpg"/>
Yet, this is how it looks:
As you can see the image is behind the navbar. I can't just use a margin because I need an element with the size of the gray space so I can have the image in the center of that space. So how can I fix this?

Answer 1

Gathering from what you want to achieve, I took the liberty to change up your markup and made you a working copy. Less complicated than what you were trying to do I think. I hope this helps in some way.
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #333;
}
.element {
position: relative;
height: 100%;
width: 100%;
font-size: 0;
}
nav,
.imgWrapper {
display: inline-block;
height: 100%;
}
nav {
width: 20%;
background-color: #0F4D92;
font-size: 1rem;
}
nav > * {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.imgWrapper {
vertical-align: top;
width: 80%;
}
.imgWrapper > img {
width: 100%;
height: 100%;
}
ul {
list-style-type: none;
width: 200px;
height: 40px;
}
<div class="element">
<nav>
<ul>
<li>Home
</li>
<li>Withdraw
</li>
<li>Deposit
</li>
</ul>
</nav>
<div class="imgWrapper">
<img src="http://placehold.it/2000x2000" alt="" />
</div>
</div>

Answer 2

Your wrapper for the navbar is position: absolute; which means that none of the other elements will interact with it. Maybe try using position: relative; instead.

Answer 3

By the way you are doing it one solution is to give .element a left margin, but you will always have to set a margin if you want to display something next to your navbar (because its absolute positioned):
.element
{
display:inline-block;
float:left;
margin-left: 210px;
}

Answer 4

Wrapper position causing this problem. You must change it to relative. You also need to change the following:
##wrapper {
position: relative;
}
#wrapper {
float: left;
width: 250px;
overflow: hidden;
}
.element {
float: right;
}
#wrapper,
.element {
display: inline-block;
width: 100%;
}