Ensuring Smooth Alignment of CSS Divs

I am facing challenges with the compatibility of my CSS code for HTML checkboxes. In certain versions of Internet Explorer and when I insert the live HTML into my PowerPoint presentation, the center div overlaps with the left div causing the entire page to shift to the left. The reason behind this issue is not clear to me.

html,
body {
  height: 90%;
  width: 90%;
  padding: 5px;
  margin: auto;
}
#googleMap {
  height: 90%;
  width: 90%;
  padding: 5px;
  margin: auto;
}
.Title {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}
#left_check {
  position: absolute;
  left: 10%;
}
#padded-left {
  position: absolute;
  padding-left: 1.4em;
}
#right_check {
  float: right;
}
#mid_check {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#left_align {
  display: inline-block;
  text-align: left;
}
<ul style="list-style-type:none">

  <div id="left_check">
    <li>
      <form>
        <input id="united_states1" type="checkbox" name="location" value="united_states">United States (domestic)
        <br>

        <div id="padded-left">
          <input id="west1" type="checkbox" class="location" value="west_coast">West
          <br>
          <input id="east1" type="checkbox" class="location" value="central_us">East
          <br>
          <input id="cent1" type="checkbox" class="location" value="east_coast">Central
        </div>
      </form>
    </li>
  </div>

  <div id="right_check">
    <li>
      <form>
        <input id="euro1" type="checkbox" class="location" value="europe">Europe
        <br>
        <input id="africa1" type="checkbox" class="location" value="africa">Africa
        <br>
        <input id="asia1" type="checkbox" class="location" value="asia">Asia
        <br>
        <input id="aust1" type="checkbox" class="location" value="australia">Australia
      </form>
    </li>
  </div>

  <div id="mid_check">
    <div id="left_align">
      <li>
        <form>
          <input id="canada1" type="checkbox" class="location" value="canada">Canada
          <br>
          <input id="centr_am1" type="checkbox" class="location" value="central_america">Central America
          <br>
          <input id="south_am1" type="checkbox" class="location" value="south_america">South America
          <br>
          <input id="ocean1" type="checkbox" class="location" value="oceanic">Oceanic
        </form>
      </li>
    </div>
  </div>

</ul>

Original CSS (Issues with some PC IE) https://i.sstatic.net/tumHj.png

With Flex https://i.sstatic.net/OL8eN.png

IE Problems (updated) https://i.sstatic.net/FuAYB.png

htmlcsscss-floatcenter

Answer №1

If I understand your question correctly, here is the solution:

ul {
     display: flex;  
     padding: 0px !important;
}
ul > div {
    /* width: 30%; */
    flex-grow: 1;
}
ul > div#right_check {
    order: 3;
}
ul > div#mid_check {
    order: 2;
}
ul > div#left_check {
    order: 1;
}
div#mid_check li {
    text-align: center;
}
div#right_check li form,
div#mid_check li form {
    text-align: left;
}
div#right_check li {
    text-align: right;
}

form {
    height: 39px;
    width: auto;
    display: inline-block;
}
#map-canvas {
    height: 500px;
    width: 100%;
    background: #AFAFAF;
}
div.frame {
    width: 80%;
    margin: auto;
}
<div class='frame'>
<div id="map-canvas"></div>
<ul style="list-style-type:none">

  <div id="left_check">
    <li>
      <form>
        <input id="united_states1" type="checkbox" name="location" value="united_states">United States (domestic)
        <br>

        <div id="padded-left">
          <input id="west1" type="checkbox" class="location" value="west_coast">West
          <br>
          <input id="east1" type="checkbox" class="location" value="central_us">East
          <br>
          <input id="cent1" type="checkbox" class="location" value="east_coast">Central
        </div>
      </form>
    </li>
  </div>

  <div id="right_check">
    <li>
      <form>
        <input id="euro1" type="checkbox" class="location" value="europe">Europe
        <br>
        <input id="africa1" type="checkbox" class="location" value="africa">Africa
        <br>
        <input id="asia1" type="checkbox" class="location" value="asia">Asia
        <br>
        <input id="aust1" type="checkbox" class="location" value="australia">Australia
      </form>
    </li>
  </div>

  <div id="mid_check">
    <div id="left_align">
      <li>
        <form>
          <input id="canada1" type="checkbox" class="location" value="canada">Canada
          <br>
          <input id="centr_am1" type="checkbox" class="location" value="central_america">Central America
          <br>
          <input id="south_am1" type="checkbox" class="location" value="south_america">South America
          <br>
          <input id="ocean1" type="checkbox" class="location" value="oceanic">Oceanic
        </form>
      </li>
    </div>
  </div>

</ul>
</div>

Does this solution meet your requirements? https://i.sstatic.net/0jUBm.jpg

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

jQuery carousel displaying a blank slide at the conclusion

I am experiencing an issue with my slideshow where it shows an empty slide after the last element. I suspect that there is something in my script causing this behavior, as it seems to be finding one extra child for the element and adding it as an empty spa ...

javascriptjqueryhtml

Deactivate the button in the final <td> of a table generated using a loop

I have three different components [Button, AppTable, Contact]. The button component is called with a v-for loop to iterate through other items. I am trying to disable the button within the last item when there is only one generated. Below is the code for ...

javascripthtmltypescriptvue.js

Bringing in Sequentially Arranged HTML Content using Asynchronous JavaScript Integration

I have a collection of separate HTML files with small content snippets that are loaded through AJAX and .get(). I want to display the content in an orderly fashion without relying on async: false in my AJAX call, as it is no longer recommended. With the si ...

jqueryhtmlajaxsynchronous

Preserve the location of a moveable div using jQuery

I have implemented draggable divs in my JSP page, allowing users to move them around freely. After dragging the divs, I would like to save their positions either in a cookie or database for future reference. Could you please advise on the best way to ach ...

javascriptjqueryhtmlcssjquery-ui

Creating a dynamic dashed line animation using SVG

Imagine a line growing in the same pattern as this fiddle. svg #path { stroke-dasharray: 19; stroke-dashoffset: 19; animation: dash 4s linear 0s forwards; } @keyframes dash { from { stroke-dashoffset: 19; } to { ...

htmlcsssvg

Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap? In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the m ...

htmlcsstwitter-bootstrapmedia-queries

Tips for setting up a hierarchical mat-table within a parent table that supports expandable rows using Angular Material

Here is the data that I am working with: [ { "_id": "c9d5ab1a", "subdomain": "wing", "domain": "aircraft", "part_id": "c9d5ab1a", "info.mimetype": "application/json", "info.dependent": "parent", ...

javascripthtmlangulartypescriptangular-material

The child elements are stacking vertically despite implementing inline-block

I have a container with 100% width. I am trying to position three divs inside it next to each other, all with the same height as the parent. Unfortunately, despite setting the display property to inline-block, they are not aligning properly and appear sta ...

htmlcsstwitter-bootstrapbootstrap-4

Tips on restricting dates to be equal to or earlier:

I have written a code to determine if two given dates are equal or not. The code should allow for the current date to be smaller than or equal to the provided date, but it should not allow for it to be greater. var date = '10-11-2015'; var toda ...

javascriptphpjqueryhtmldate

Should CSS properties be applied directly to the html tag?

Surprisingly, I recently discovered that it's possible to set the background-color of the html tag. It seems strange since I always thought the body was responsible for containing the first rendered tag. I used to believe that the html tag was just a ...

htmlcss

What makes the element[class=noquotes] function so effective?

According to the MDN attribute selector in CSS, it has the following syntax: div[attr="actualValue"] For example: <div class="test"></div> div[class="test"] However, I have observed that the quotes around the test are not necessary as show ...

htmlcssw3c

Tips for modifying the border of an entire column in react-table

My goal is to adjust the style according to the screenshot below. This is what I expect: However, this is what I currently have: As you can see, the border bottom of the last column is not applied as expected. I have tried using the props provided by r ...

javascriptcssreactjsreact-table

What causes the form to be submitted when the text input is changed?

I'm puzzled by the behavior of this code snippet that triggers form submission when the input value changes: <form> <input type="text" onchange="submit();"> </form> Typically, I would expect something along t ...

javascripthtml

What is the process for assigning various hyperlinks to database array outputs?

https://i.sstatic.net/AuYe7.jpg I've got an array of usernames pulled from a database. By using a for each loop, I'm able to display these usernames along with additional information like paragraphs written by the users and the date those paragr ...

phphtml

Resolve Bootstrap columns with varying heights

My Bootstrap row contains a variable number of columns determined by a CMS, sometimes exceeding the space available on one line. I am looking for a way to neatly display all the columns with equal heights. <div class='row'> <div cl ...

jquerycsstwitter-bootstrapresponsive-design

fluid columns gliding from side to side

I'm currently working with Bootstrap to design responsive columns. My goal is to have the next column of content slide in from either the left or right side when the user clicks on the respective arrow button. While I have found solutions for fixed w ...

jquerycsstwitter-bootstrap

Showing a PDF from a shared folder on a network using AJAX in HTML5

I'm facing a challenge with displaying a PDF on the web. The layout includes a dropdown menu on the left with various PDF file names, and upon selection, the chosen PDF should be displayed on the right using an ajax call. Since my PDFs are stored in a ...

phpajaxhtmlpdf

I am having trouble getting two similar Javascript codes to function simultaneously

Using a common JavaScript code, I am able to display a div when a certain value is selected. http://jsfiddle.net/FvMYz/ $(function() { $('#craft').change(function(){ $('.colors').hide(); $('#' + $(this ...

javascriptjqueryhtmlcss

When using $dialogs.create on my website, a popup form appears with specific formatting limitations dictated by the defining code

When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Creating dynamic form groups that allow for the addition and removal of forms while assigning unique identifiers and names to each input field

I am currently immersed in the development of a sophisticated CMS system. My main objective is to dynamically add and remove form inputs using JavaScript upon clicking a button, with the ultimate goal of submitting the data into a database via PHP script. ...

javascriptphpjqueryhtmltwitter-bootstrap