Issue with divs not being contained in parent div

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;
}

If you want to put some size restrictions to parent div then apply `height: 100px ` instead of 1000px. Is that what are you after ? — divix, Mar 16 '16 at 22:34
The issue is with your menu on the left. Post the code for that. By default, DIV's are block level elements, so unless you modified the DIV that contains your menu, nothing can appear to the right of it. $10 says if you make the menu container and the secClass inline-block with defined widths, it will work the way you want :) — Jeff.Clark, Mar 16 '16 at 22:37

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

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.

Issue with divs not being contained in parent div

1 Answers1

Linked