Issue with divs not being contained in parent div - html

Question

I have an issue with my HTML/CSS code. I have a parent div (secClass)and within that I have 2 child divs(secClass1 and secClass2). The problem is that the contents of the child divs are not being contained in the parent div. Do you know whats the issue here? I have included the screenshot and code for reference.
div.secClass {
background-color: 806815;
height: 1000px;
}
div.secClass1 {
background-color: D4BD6A;
display: inline-block;
}
div.secClass2 {
background-color: D4BD6A;
display: inline-block;
}
<div id="section" class="secClass">
<div class="secClass1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="secClass2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="Lnav" class="navClass">
<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
div.navClass
{
float:left;
background-color:D4BD6A;
width:150px;
height:700px;
}
div.navClassItems
{
text-align:center;
}

Answer 1

Since you have your navClass float left, the issue is that the secClass div cannot fit since it is 100% width by default. If you conceptually make it 100% - 150px, your secClass div will pop up into that spot. For example:
#Wrapper{
...
width:1000px;
...
}
.navClassItems {
...
width:150px;
...
}
.secClass {
...
width:850px;
...
}
With
<div id="wrapper">
<div id="Lnav" class="navClass">
<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
<div id="section" class="secClass">
<div class="secClass1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="secClass2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Do not forget to account for margin or padding. Look into box-sizing and CSS display: inline vs inline-block SO article for more info.
Sorry, I just saw I misnamed the .navClassItems to .navClass. Should be more accurate now.