Sudden overflow with float/clear - css

Question

I'm trying to style a page without the common grid systems using float and clear. The page should use the full viewport for both width and height. The below setup works fine, unless I start resizing the viewport. Once I move the viewport, the navigation and content section suddenly start to overlap, with the content being rendered below the navigation.
Is there something wrong with my approach or should I not use vh and vw when users are likely to resize the viewport?
The setup is meant to be conceivably simple:
A header bar with a height of 40px.
A side navigation section with a width of 20vw
A content section with a width of 80 vw - some margins.
The navigation and content sections are meant to have a min height to fill the viewport.
Sizes like 79.99vw and 99.9vh were introduced to avoid any rounding issues. I have also tried 80vw and 100vh respectively.
My template looks like this:
<div class="dashboard-wrapper">
<header class="header-bar">
<h1 class="bar-title">Brand Logo</h1>
<button class="logout-button">Log out</button>
</header>
<section class="side-bar">
<nav role="navigation" class="sidebar">
<ul>
<li>Navigation One</li>
<li>Navigation Two</li>
<li>Navigation Three</li>
<li>Navigation Four</li>
<li>Navigation Five</li>
</ul>
</nav>
</section>
<section class="content">
<h2>Lorem Ipsum</h2>
<p>Sed ut perspiciatis ...</p>
</section>
</div>
My CSS looks like this:
.dashboard-wrapper {
margin-right: auto;
margin-left: auto;
}
.dashboard-wrapper header.header-bar {
float: top;
height: 40px;
}
.dashboard-wrapper header.header-bar h1 {
position: relative;
margin: 0 0 0 5px;
float: left;
}
.dashboard-wrapper header.header-bar button {
position: relative;
height: 40px;
width: 80px;
border: 0;
float: right;
}
.dashboard-wrapper section.side-bar {
float: left;
clear: left;
width: 20vw;
min-height: calc(99.9vh - 40px - 20px);
margin: 10px;
background: white;
}
.dashboard-wrapper section.content {
float: right;
clear: right;
position: relative;
width: calc(79.99vw - 30px);
min-height: calc(99.9vh - 40px - 20px);
margin: 10px 10px 10px 0;
background: white;
}
This was so far only tested in Chrome on Windows.

Answer 1

Removed invalid float:top,
added clearfix class : .cf to clear floats
added box-sizing:border-box just in case you might use padding
switched width using vw units for % units to get rounded values when using calc and to get consistent result across devices.
a few other small things.
* {
box-sizing: border-box
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
body {
margin: 0;
}
.dashboard-wrapper header.header-bar {
height: 40px;
/*demo*/
background: green
}
.dashboard-wrapper header.header-bar h1 {
margin: 0 0 0 5px;
float: left;
}
.dashboard-wrapper header.header-bar button {
height: 40px;
width: 80px;
border: 0;
float: right;
}
.dashboard-wrapper section.side-bar {
float: left;
width: 20%;
min-height: calc(100vh - 60px);
margin: 10px;
background: red;
}
.dashboard-wrapper section.content {
float: left;
width: calc(80% - 30px);
min-height: calc(100vh - 60px);
margin: 10px 10px 10px 0;
background: lightblue;
}
footer {
background:orange;
width:100%
}
<div class="dashboard-wrapper">
<header class="header-bar cf">
<h1 class="bar-title">Brand Logo</h1>
<button class="logout-button">Log out</button>
</header>
<div class="main-wrapper cf">
<section class="side-bar">
<nav role="navigation" class="sidebar">
<ul>
<li>Navigation One</li>
<li>Navigation Two</li>
<li>Navigation Three</li>
<li>Navigation Four</li>
<li>Navigation Five</li>
</ul>
</nav>
</section>
<section class="content">
<h2>Lorem Ipsum</h2>
<p>Sed ut perspiciatis ...</p>
</section>
</div>
<footer>
Lorem Ipsum ed ut perspiciatis ...
</footer>
</div>