Floats stacking one upon the other - html

Question

I have three floats. One on the left (the logo, this is ok) and two on the right: one should be a background image, while the other is a navbar. The problem is that they dont stack upon each other, but they stay one close to another, like two blocks. How to make them stack (navbar upon the background) without using position: relative or absolute? (Because this will make less responsive my site, with the navbar that changes the layout based on screen resolution, I don't want to use media queries)
I tried using z-index, they are in different positions on the z-axis but they still place background-image on the right and navbar on the left of background-image.
.under-bg_blue-big {
float: right;
height: 690px;
width: 690px;
background-image: url(../img/bg-intro-desktop.svg);
}
.list {
float: right;
color: white;
margin-top: 36px;
margin-right: 0px;
padding-left: 0px;
}
nav>ul>li {
list-style: none;
display: inline;
position: relative;
z-index: 5;
}
.under-bg_white-btn {
margin-right: 16px;
font-size: 12px;
}
.under-bg_green-btn {
background-color: #06d89b;
padding: 8px 21px;
border-radius: 5px;
margin-right: 24px;
font-size: 12px;
}
.logo {
float: left;
margin-top: 26px;
margin-left: 24px;
position: relative;
z-index: 1;
}
<img src="img/logo.svg" alt="fylo logo" class="logo">
<div class="under-bg_blue-big"></div>
<div class="navbar">
<nav>
<ul class="list">
<li class="under-bg_white-btn">Sign In</li>
<li class="under-bg_green-btn">Sign Up</li>
</ul>
</nav>
</div>

Answer 1

Try like this:
.under-bg_blue-big {
float: right;
height: 690px;
width: 100%;
background-image: url(../img/bg-intro-desktop.svg);
}
.list {
float: right;
color: white;
margin-top: 36px;
margin-right: 0px;
padding-left: 0px;
}
nav>ul>li {
list-style: none;
display: inline;
position: relative;
z-index: 5;
}
.under-bg_white-btn {
margin-right: 16px;
font-size: 12px;
}
.under-bg_green-btn {
background-color: #06d89b;
padding: 8px 21px;
border-radius: 5px;
margin-right: 24px;
font-size: 12px;
}
.logo {
float: left;
margin-top: 26px;
margin-left: 24px;
position: relative;
z-index: 1;
}
<div class="under-bg_blue-big">
<img src="img/logo.svg" alt="fylo logo" class="logo">
<div class="navbar">
<nav>
<ul class="list">
<li class="under-bg_white-btn">Sign In</li>
<li class="under-bg_green-btn">Sign Up</li>
</ul>
</nav>
</div>
</div>