J. Scull J. Scull - 28 days ago 7
CSS Question

Child DIV fallen outside of parent DIV

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:
image of html+css output

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

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>

Comments