Child DIV fallen outside of parent DIV - html

Question

So, my parent DIV contains 3 main DIV which contain a couple DIVs each. I have the parents li elements displayed inline as I want all 3 nested DIVs to be side by side along the width of the parent. I have been successful with getting the first two lined up correctly. The third div has the correct x-axis positioning however on the y-axis it has dropped down and outside of the parent div and I'm not sure where I am going wrong. I have tried many many different solutions on StackOverflow, however, none have had any success.
I have the right-hand div (the one below parent) set to absolute as if it's not then it does not get the correct x-axis, with absolute it gets half the position correct.
Relevant code:
.supContainer {
position: absolute;
top: 900px;
left: 38%;
width: 400px;
}
.supContainer ul {
list-style-type: none;
padding-left: 0px;
margin: 0;
}
.supContainer li {
display: inline-block;
white-space: nowrap;
margin-top: 10px;
margin-right: 10px;
}
#supp {
margin-left: 295px;
}
.leftUpper {
width: 233px;
padding-left: 47px;
}
.leftLower {
width: 233px;
padding-bottom: 10px;
}
.supMid {
float: none;
margin-right: 5px;
width: 201px;
padding-left: 238px;
}
.rightUpper {
width: 266px;
}
.rightLower {
width: 266px;
}
.wrapper .leftSide {
margin-top: 24px;
position: absolute;
width: 233px;
left: 0;
}
.wrapper .rightSide {
float: right;
position: absolute;
width: 273px;
left: 445px;
/*top:88px;*/
}
.wrapper {
width: 730px;
height: 155px;
overflow: hidden;
}
#sysit {
margin-left: 35px;
}
#comms {
margin-left: 15px;
}
#collapseExample {
width: 730px;
}
/* GLOBAL CLASSES FOR COMMON ADJUSTMENTS */
.inLine li {
/* Remember to define a width within parent */
display: inline-block;
white-space: nowrap;
}
.borderMe {
border: 2px solid black;
}
.borderMeGreen {
border: 2px solid green;
}
.borderMeRed {
border: 2px solid red;
}
.paddSingleLine {
padding-top: 15px;
padding-bottom: 15px;
}
<div class="supContainer">
<button class="btn btn-warning" id="supp" type="button" data-toggle="collapse" data-target="#collapseExample">Support</button>
<div class="collapse borderMe" id="collapseExample">
<li>
<ul>
<br/>
<div class="wrapper inLine borderMe">
<div class="leftSide">
<div class="leftUpper inLine">
<li>
<button class="btn btn-warning" type="button">Capital
<br/>Equipment</button>
</li>
<li>
<button class="btn btn-warning" type="button">Finance
<br/>Process</button>
</li>
</div>
<div class="leftLower inLine">
<li>
<button class="btn btn-warning paddSingleLine" type="button">NDA</button>
</li>
<li>
<button class="btn btn-warning" type="button">QMS
<br/>Update</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">Projects</button>
</li>
</div>
</div>
<div class="supMid">
<li>
<button class="btn btn-warning" id="sysit" type="button">Systems and IT</button>
</li>
<br/>
<li>
<button class="btn btn-warning" id="comms" type="button">Communication
<br/>Relationship/Structure</button>
</li>
<br/>
<li>
<button class="btn btn-warning" type="button">Disaster Recovery Planning</button>
</li>
</div>
<div class="rightSide borderMe">
<div class="rightUpper inLine">
<li>
<button class="btn btn-warning paddSingleLine" type="button">Admin</button>
</li>
<li>
<button class="btn btn-warning" type="button">Recruitment
<br/>/Contractors</button>
</li>
</div>
<div class="rightLower inLine">
<li>
<button class="btn btn-warning" type="button">Export
<br/>Control</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">HR Staff</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">HS and E</button>
</li>
</div>
</div>
</div>
</ul>
</li>
</div>
</div>
And a screen-grab of the output of the code:
Sorry for the sloppy code I'm new to this. If you could tell me where I've gone wrong but also why it's gone wrong and why the solution will fix it I'd be grateful as it will aid my learning.
Cheers and thanks in advance.

Answer 1

You are messing it up with position:absolute. Check the solution below.
Just update:
.supMid {
float: left;
margin-right: 5px;
width: 201px;
}
.wrapper .leftSide {
position: relative;
width: 233px;
float: left;
}
.wrapper .rightSide {
float: left;
position: relative;
width: 273px;
}
.wrapper {
width: 730px;
height: 155px;
overflow: hidden;
padding-top: 10px;
}
.supContainer {
position: absolute;
top: 900px;
left: 38%;
width: 400px;
}
.supContainer ul {
list-style-type: none;
padding-left: 0px;
margin: 0;
}
.supContainer li {
display: inline-block;
white-space: nowrap;
margin-top: 10px;
margin-right: 10px;
}
#supp {
margin-left: 295px;
}
.leftUpper {
width: 233px;
padding-left: 47px;
}
.leftLower {
width: 233px;
padding-bottom: 10px;
}
.supMid {
float: left;
margin-right: 5px;
width: 201px;
}
.rightUpper {
width: 266px;
}
.rightLower {
width: 266px;
}
.wrapper .leftSide {
position: relative;
width: 233px;
float: left;
}
.wrapper .rightSide {
float: left;
position: relative;
width: 273px;
}
.wrapper {
width: 730px;
height: 155px;
overflow: hidden;
padding-top: 10px;
}
#sysit {
margin-left: 35px;
}
#comms {
margin-left: 15px;
}
#collapseExample {
width: 730px;
}
/* GLOBAL CLASSES FOR COMMON ADJUSTMENTS */
.inLine li {
/* Remember to define a width within parent */
display: inline-block;
white-space: nowrap;
}
.borderMe {
border: 2px solid black;
}
.borderMeGreen {
border: 2px solid green;
}
.borderMeRed {
border: 2px solid red;
}
.paddSingleLine {
padding-top: 15px;
padding-bottom: 15px;
}
<div class="supContainer">
<button class="btn btn-warning" id="supp" type="button" data-toggle="collapse" data-target="#collapseExample">Support</button>
<div class="collapse borderMe" id="collapseExample">
<li>
<ul>
<br/>
<div class="wrapper inLine borderMe">
<div class="leftSide">
<div class="leftUpper inLine">
<li>
<button class="btn btn-warning" type="button">Capital
<br/>Equipment</button>
</li>
<li>
<button class="btn btn-warning" type="button">Finance
<br/>Process</button>
</li>
</div>
<div class="leftLower inLine">
<li>
<button class="btn btn-warning paddSingleLine" type="button">NDA</button>
</li>
<li>
<button class="btn btn-warning" type="button">QMS
<br/>Update</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">Projects</button>
</li>
</div>
</div>
<div class="supMid">
<li>
<button class="btn btn-warning" id="sysit" type="button">Systems and IT</button>
</li>
<br/>
<li>
<button class="btn btn-warning" id="comms" type="button">Communication
<br/>Relationship/Structure</button>
</li>
<br/>
<li>
<button class="btn btn-warning" type="button">Disaster Recovery Planning</button>
</li>
</div>
<div class="rightSide borderMe">
<div class="rightUpper inLine">
<li>
<button class="btn btn-warning paddSingleLine" type="button">Admin</button>
</li>
<li>
<button class="btn btn-warning" type="button">Recruitment
<br/>/Contractors</button>
</li>
</div>
<div class="rightLower inLine">
<li>
<button class="btn btn-warning" type="button">Export
<br/>Control</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">HR Staff</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">HS and E</button>
</li>
</div>
</div>
</div>
</ul>
</li>
</div>
</div>

Answer 2

Try this
Jsfiddle
Give .supMid property display: inline-block
.supMid{
float:none;
display: inline-block;
margin-right:5px;
width:201px;
padding-left:238px;
}
Just give vertical-align:top to .rightSide. No need of position to set element
.wrapper .rightSide {
float: right;
width: 250px;
vertical-align: top;
}

Answer 3

Try to change some of their properties. I used float instead of position
.wrapper .leftSide {
margin-top: 24px;
float: left;
width: 233px;
}
.supMid {
float: left;
margin-right: 5px;
width: 201px;
}
.wrapper .rightSide {
float: left;
width: 273px;
}