the solution to resolving misaligned CSS divs

I am facing an issue with displaying 3 div cards that contain different sets of information. Despite setting them to display:grid and trying to evenly distribute the fractions, the divs are stacking awkwardly.

JS fiddle demo

     <!--Main Background-->
    <div class="background">
      <!--Main working panel-->
      <div class="workspace">
        <!--Memberships Card-->
<div class="card text-center profile-card box box-primary">
    <div class="card-body" >
      <h5 class="card-title" style="color:white;"><i class="far fa-credit-card"></i>  Memberships</h5>
      <p class="card-text" style="color:rgba(255, 255, 255, 0.295);">Set or adjust your membership status</p>
    </div>
    <div class="card-footer"style=" padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;" >
        <ul class="list-group list-group-unbordered">
            <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
              <div >
              <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per " day "</b>
            </div>
            </li>
            <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                <div >
                <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per "day"</b>
              </div>
              </li>
              <li class="list-group-item" >
                  <div >
                  <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per "day"</b>
                </div>
                </li>
          </ul>
    </div>
</div>
        <!--Profile card-->
        <div class="card text-center profile-card  box box-primary">
            <div class="card-body" >
                <img src="img/pickles.png"  class="mr-3 profile-icons " alt="...">
                <br>


                      </li>
                  </ul>
            </div>
        </div>
        <br>
<div>
        <!--Target Card-->
        <div class="card text-center profile-card  box box-primary">
            <div class="card-body" >

                    </div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                        <div >
                        <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per "day"</b>
                      </div>
                      </li>
                      <li class="list-group-item" >
                          <div >
                          <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per "day"</b>
                        </div>
                        </li>
                  </ul>
            </div>
        </div>
      </div>
        <br>

        <!--Target Jumbotron-->
        <div class="card profile-jumbotron" >
            <div class="container">
              <h1 class="display-4">Charts</h1>
              <p class="lead">
                  <canvas id="myChart" width=400 height=100></canvas>
                  <input type="button" value="Add Data" onclick="adddata()">                <div class="progress">

                <div class="progress">
                  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</p>
            </div>
          </div>

      </div>

    </div>

Could someone assist in figuring out why there is a misalignment issue and the content of the divs is overflowing beyond the screen? I also attempted to align a jumbotron with them without success.

javascripthtmlcss

Answer №1

Check out this JSFiddle Demo

  1. An extra div wrapper was found for your last div section

  2. Remove the unnecessary br tag

<div class="card text-center profile-card box box-primary">
       <div class="card-body" >
              <h5 class="card-title" style="color:white;"><i class="fas fa-bullseye"></i> Targets</h5>
              <p class="card-text" style="color:rgba(255, 255, 255, 0.295);">Set or adjust your performance targets</p>
       </div>
       <div class="card-footer" style=" padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;" >
               <ul class="list-group list-group-unbordered">
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                      <div >
                      <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                    </div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                        <div >
                        <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                      </div>
                      </li>
                      <li class="list-group-item" >
                          <div >
                          <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                        </div>
                   </li>
              </ul>
       </div>
 </div>

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

Ways to enable scrollbars within a container when the content inside a code tag exceeds the visible area

How do I add scrollbars to a code element if the line of syntax is longer than the view? I've attempted using overflow: scroll, but it's not functioning as expected. As shown in the image, using overflow causes the browser to scroll horizontally ...

htmlcsssass

Question regarding the manipulation of attributes in Jquery

I'm a beginner with jQuery and struggling to find a solution for my issue. I have implemented jQuery easytooltip on some SVG elements in my website, which is working well. However, I need to dynamically change certain attributes of the tooltip when ne ...

javascriptjqueryhtml

Should data validations be implemented on both the client-side and server-side for optimal security and accuracy?

My query is related to utilizing Angular on the client side and Laravel API on the server side. I'm wondering if it is more effective to implement data validations on both ends. ...

javascriptphpangularjsvalidation

Using AngularJS to send a model to ui-select

Here is the scenario at hand: A form includes a directive known as <timeZone ng-model="formModel.timeZone" This directive communicates with a web service to fetch timezone information The directive then presents the timezones in a ui-select dropdown ...

javascriptangularjs

Preventing Element Reload in Django Using AJAX Across Multiple Templates

NOTE: Updated base.html and refined title UPDATE 2: An example of what I'm referring to is the ticker showing x y z, then transitioning to a, b, c, and so forth. How can I maintain the position of the ticker when navigating pages so that if it's ...

javascriptjqueryjsonajaxdjango

Tips for populating input fields with retrieved data when the fields are generated dynamically

Sharing some context: I've been working on implementing an edit button for a Content Management System, facing a few challenges along the way. I've taken over from another developer who initiated the CMS project, and I'm now tasked with com ...

javascriptphpjqueryajaxcontent-management-system

Having trouble with getting the second JavaScript function to function properly?

I am facing an issue with the second JavaScript function. When I click the 'Send Mail' button, it should call the second function and pass it two values. However, the href line (second last line in the first function) is not rendering correctly. ...

javascriptjqueryhtmlfunctionurl

jQuery floating sidebar that dynamically adjusts position based on content overflow

I've come across an interesting scenario with a fiddle that I'm working on: http://jsfiddle.net/yFjtt/1/ The main concept is to allow users to scroll past the header and have the sidebar 'stick' in place as they continue scrolling down ...

javascriptjquery

Unable to implement the hover property for the entire class in CSS

I am struggling to highlight the entire class element on hover. Even though I have specified the button class as a selector, only the background color of the anchor tag is changing when I hover over the button. What could be causing this issue and how can ...

javascripthtmlcss

Interacting with a C# Web Service Using JQuery

I've set up a JSON web service in C# and I'm working on creating a custom HTML page to interact with it. http://localhost:25524/DBService.svc/json/db=TestDB/query=none When I input this URL into my browser, I expect to receive JSON formatted da ...

c#javascriptjqueryjsonwcf

Guide to implementing this specific design using CSS within jQuery Mobile

Want to achieve the red circle effect using CSS. Currently working with jQuery mobile and AngularJS. Below is a snippet of my code: <div data-role="page" id="p2"> <div class="ui-bar ui-bar-d "data-role="header" > <a href="" data-role=" ...

css

contrasts in regex special characters: .net versus javascript

Here is my current javascript implementation: EscapeForRegex = function(input) { var specials = ["[", "\\", "^", "$", ".", "|", "?", "*", "+", "(", ")", "{", "}"] for (var k in specials) { var special = specials[k]; ...

c#javascript.netregexvb.net

Halt the execution of any additional code

I have a favor to ask: Character.count({'character.ownerid': msg.author.id}, function (err, count) { if (err) { throw err; } if (count > 3) { err.message = 'Exceeded character limit'; //create error ...

javascriptnode.jsmongodbmongoose

Vue3/Vuex - Issue with state change not being reflected in component when utilizing object destructuring

While working with Vue 3 and Vuex, I encountered an issue where Vue did not react to a state change when using object destructuring assignment to mutate the state. However, I found that Vue does react when the state is mutated by a mutation that only reass ...

javascriptvue.jsvuexmutation

Include the referrer header when using the chrome.downloads API

I have been working on developing an extension that replicates the Ctrl+Click to save image functionality from Opera 12. In my extension, I am utilizing chrome.downloads.download() in the background script to trigger downloads, while a content script is re ...

javascriptgoogle-chrome-extension

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

htmlcssflexbox

FontAwesome symbols are not displaying on any chromium-based web browsers

I have been updating a theme from fontawesome 4 to 5, and everything seems to be working fine except for one specific icon that is displayed as a css pseudo-element. Even though I followed the guidelines in the FA docs, the icon still does not appear. It ...

cssfont-awesomepseudo-element

The fixed navbar in Bootstrap is too wide for the HTML content, resulting in horizontal overflow

My website has a fixed-top navbar that appears wider than my actual HTML tag. I suspect there may be an issue between the navbar and my bootstrap modal, but I am unsure how to resolve it. The wider navbar causes a white space to appear on the right side o ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to retain changes made to a checkbox that is used for email notifications?

Users on my website receive email notifications when someone comments on their profile or blog. To give users control over these notifications, I have created an email settings page with checkboxes that allow them to choose whether or not they want to rece ...

phphtmlcheckboxtoggleonsubmit

Creating a formatted JSON string from the data retrieved using a GET request and embedding it into an HTML template to be sent as the

Struggling to send JSON data retrieved from a GET METHOD as an email. The challenge is defining the body of the email using the obtained JSON object. Looking for solutions! Below is a snippet of my code: app.get('/userinfo',(req,res)=>{ ...

javascriptnode.jsexpress