The little DIV strayed beyond the boundaries of its parent DIV

I am facing a challenge with the positioning of nested divs within my parent div. The first two are aligned correctly, but the third one is dropping down outside of the parent div on the y-axis. I have tried various solutions from StackOverflow without success.

The right-hand div is set to absolute positioning to achieve the correct x-axis alignment. However, it only gets half the position correct in this way.

Below is the relevant code snippet:

.supContainer {
  position: absolute;
  top: 900px;
  left: 38%;
  width: 400px;
}
.supContainer ul {
  list-style-type: none;
  padding-left: 0px;
  margin: 0;
}
...

If you would like to see how the output looks, here is a screen-grab: https://i.sstatic.net/Rm1Mq.png

Please excuse any mistakes in my code as I am new to this. Your guidance on where I went wrong and why it occurred, along with the solution, will greatly benefit my learning process. Thank you for your help.

Appreciate it!

htmlcss

Answer №1

You're causing issues with the position:absolute property. Take a look at the corrected solution provided below.

Simply make these updates:

.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;
        }
        /* More CSS styles go here */

        <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

Check out this solution

View on Jsfiddle

Set the .supMid property to display: inline-block 

.supMid{
 float:none;
 display: inline-block;
 margin-right:5px;
 width:201px;
 padding-left:238px;
}

Add vertical-align:top to .rightSide. Avoid using position to position the element

.wrapper .rightSide {
  float: right;
  width: 250px;
  vertical-align: top;
}

Answer №3

Experiment with adjusting their attributes. I opted for using 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;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for specifying a JSON object within a DOM element's `data` attribute?

In an attempt to store JSON data within a dataset attribute, I encountered the following HTML structure: The appearance of the HTML is as follows <div data-switch="true" data-json="{'key1': 'value 1'}, {'key2': 'valu ...

javascriptjqueryhtmljson

Utilizing a mouse-over script for image popup alignment

I recently came across the mouse over script below on a website, and I must say it works really well and is very easy to use. The only issue I have with it is the placement of the image. Currently, the image follows the cursor as it moves. Question: Is th ...

javascriptjqueryhtmlcss

Contrast between action="" and action="#" attributes in HTML

There are two ways I've come across for setting a form's action attribute. #1. Using an empty string as the action attribute value: action="" #2. Specifying a hash symbol (#) as the action attribute value: action="#" What distingishes these ...

phphtmlforms

"Upload a text file and create a JavaScript variable that contains the text within it

I am currently developing a library and I need to add a feature that reads the contents of a text file. Currently, it only returns the path. How can I modify it to return the actual content of the file? function displayFileContent() { var file = do ...

javascripthtmlupload

Collect the text shown in an alert message created with JavaScript

I'm currently unsure if this is achievable or not. In one of my scenarios, I aim to extract text that appears in alert boxes on external websites by including my JavaScript file. Is there a method to obtain the text content shown in an alert message ...

javascripthtml

"Stay informed with the latest updates on Wordpress through our

I am currently working on creating a static homepage with a newsfeed, but I only want to display the title and date posted. I considered using a widget, but I plan to integrate this news feed with a slideshow in the future and didn't want to limit my ...

htmlwordpressfeed

Can you direct me to resources on the internet that provide information about support for 12 Bit color depth?

I am curious to know when the w3specs will support colors in 12 bits instead of the current 8-bit format used for webcolors like sRGB (#FFFFFF or rgba(255,0,0,100). I wonder if there will ever be a new standard called 12-Bit sRGB where colors can be defin ...

csscolorsphotocolor-depthsrgb

Tailwind's implementation of CSS Grid allows for the creation of a grid structure where specific cells can be selectively populated

I am currently using Tailwindcss with my Next.js application to showcase multiple images retrieved from a Supabase database in a grid layout. However, I am facing a problem where the images are being displayed in rows instead of columns within the grid whe ...

cssnext.jsgridtailwind-csscss-grid

What could be causing the vertical alignment issue of this logo in its parent container?

I am having an issue with the vertical centering of the logo element within the <header> container on this page. It seems to be more pronounced on mobile devices compared to desktop. However, the second element (#forum-link) is aligning correctly. W ...

htmlcssresponsive-design

What is the best way to organize angularjs controllers and directives within one another?

When I structure my controllers like this: <body ng-app="app" ng-controller="ctrl"> <div ng-controller="app-get"> <app-get></app-get> </div> <div ng-controller="app-post"> <app-post">& ...

javascripthtmlangularjs

Using Selenium, effortlessly upload JPEG images through the Selenium webdriver

Sample HTML Code: <form id="frmUploadVisualAsset" enctype="multipart/form-data" method="Post" action="uploadVisualAsset" novalidate="novalidate"> <input id="slideIdForAsset" type="hidden" name="slideIdForAsset"> <input id="course ...

htmlselenium

Prevent Bootstrap 4 from causing content to shift downwards when collapsing

Currently, I am utilizing Bootstrap 4 Collapse and it is functioning flawlessly. However, I am interested in making a slight adjustment. Is there a method to prevent the collapse from pushing down the content below it and instead have it overlap? If this i ...

csstwitter-bootstrapbootstrap-4

How come my web page is not displaying the guages from guage.js?

I am utilizing guage.js to create a graph based on this Fiddle. However, upon adding the same code to my website, the rendering does not appear as expected: https://i.sstatic.net/fIkQr.png Upon inspecting in Chrome developer tools, I noticed that the ele ...

javascripthtmljquerycss

How to loop through a list variable using Razor syntax in an HTML document

Exploring the world of asp .net and MVC is a new adventure for me. I have delved into a service method named Jumbo(), which delivers a list consisting of first names, last names, and contact numbers. In my main project, I invoke this method in the followin ...

c#asp.nethtmlasp.net-mvc-4razor

Adding clickable padding to a Draft.js editor can enhance the user experience and make the editing process

Is there a way to apply padding to the Draft.js Editor so that clicking on the padding area selects the Editor? If I add padding directly to the container div of the Editor, the padding displays properly but clicking on it does not enable writing in the E ...

javascriptcssreactjsdraftjs

Retrieve all data points if both latitude and longitude are present in the XML dataset

XML data to retrieve details <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <results> <result> <Country_Code>IN</Country_Code> <Country_Name>India</Country_Name> <Region_Nam ...

javascripthtmlxmlxpath

CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the ...

htmlcssxhtmlcss-tables

Tips on positioning an image at the center of an HTML page

When designing a website, I encountered an issue where only a portion of the image was displaying in the slider due to the fixed height of the div being set to 500. I want the full image to be displayed centered within the same height. <div id="myCar ...

htmlcsstwitter-bootstrap

What is the best way to assign a class to objects with a count greater than a

Can someone assist with editing a foreach loop to add a class to divs only if the number of divs is greater than 3, without affecting those with fewer divs? @if(!empty($property->testimonials)) @foreach($property->testimonials as $testimonial) ...

phphtmlfor-loopforeachlaravel-blade

Is it mandatory to include a DOCTYPE/DTD in XHTML5?

Currently in the process of developing a new language that converts to XML, I am facing the limitation of not being able to support DOCTYPE/DTD. Would it be possible for me to utilize XHTML5 without needing to declare , or will I have no choice but to in ...

xmlhtmlxhtmldoctype