Content Div overlaps Menu Div - HTML & CSS - html

Question

I have content navigation div overlapping menu navigation div. Please let me know what am i missing here. Please find fiddle link below:
https://jsfiddle.net/y4c2xs5j/1/
HTML:
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
}
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}

Answer 1

As per my understanding, you want to cover only 60px width with menu-nav, and rest want to cover with content-nav, According to below code:
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}
If I am getting correct then you just neeed to add one more property with content-nav, overflow:hidden;
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
overflow:hidden;
}
By adding overflow hidden, you will get complete width rest 60px with content-nav, That is issue cause by float:left, when we are use float property, then the issue is generated, for the same we have to use overflow:hidden

Answer 2

Try this code. Is this what you needed ?
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
display: flex;
flex-direction: column;
}
.menu-nav {
width: 100vw;
background: green;
height: 20vh;
float: left;
}
.content-nav {
width: calc(100vw - 100px);
background: yellow;
height: 100vh;
}

Answer 3

You just need to add one property in ".content-nav" and also add clearifx class in the parent of both tag (.menu-nav, .content-nav)
<div class="top-nav clearfix">
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
float: left;
}

Answer 4

Whenever you use rows and columns, please check if you have at least one container that contains them. The gap you see on the right is caused by the negative margins from the rows.
The easy fix is to have .container-fluid on or inside menu and content nav.
On menu and content nav
<div class="top-nav">
<div class="menu-nav container-fluid">
...
</div>
<div class="content-nav container-fluid">
...
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/8/
Inside menu and content nav
<div class="top-nav">
<div class="menu-nav">
<div class="container-fluid">
...
</div>
</div>
<div class="content-nav">
<div class="container-fluid">
...
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/7/
You don't need to calculate the width for content-nav as fluid container will set its width to 100%:
.content-nav {
/*width: calc(100vw - 60px);*/
background: yellow;
height: 100vh;
}