Rod running from one end to another within a receptacle

I'm facing a challenge with my container (CardContainer) and its child elements. I want to create a bar that fills the space between the card image and the chevron, but I'm having trouble figuring out the best approach. How can I ensure that this bar stays in place regardless of the page size?

<div class="CardContainer">
  <div class="CardLineItem">
    <div class="CardLineItemImage"><img
        src="https://icm.aexp-static.com/Internet/Acquisition/US_en/AppContent/OneSite/category/cardarts/platinum-card.png">
    </div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 320 512"
      class="CardLineItemChevron" height="25%" width="25%" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
      </path>
    </svg>
    <div class="CardLineItemProgressBar">
      <div class="CardLineItemProgressBarOutline">test</div>
    </div>
  </div>
</div>

I've experimented with different CSS properties like position: relative and absolute, but I'm still struggling to find a solution.

Any assistance or advice on this issue would be greatly appreciated. Thank you!

htmlcss

Answer №1

If you want to differentiate the first div, consider adding a border bottom:

border-bottom: 5px solid black;

Alternatively, you can use the <hr> tag to separate both divs:

<div class="CardContainer">
  <div class="CardLineItem">
    <div class="CardLineItemImage"><img
        src="https://icm.aexp-static.com/Internet/Acquisition/US_en/AppContent/OneSite/category/cardarts/platinum-card.png">
    </div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 320 512"
      class="CardLineItemChevron" height="25%" width="25%" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l-22.667-22.667c-9.373-9.373-24.569-9.373-33.941 0L285.475 239.03c-9.373 9.372 9.373 24.568.001-33.941z">
      </path>
    </svg>
    <hr>
    <div class="CardLineItemProgressBar">
      <div class="CardLineItemProgressBarOutline">test</div>
    </div>
  </div>
</div>

You may also need to apply additional CSS to customize the appearance according to your preference.

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

Set dimensions for the input submit border inside

Can anyone help me figure out how to prevent the border from being drawn inside of my submit button element? I have a specific width and height set for cross-browser consistency, but in Firefox 15 and IE7 the border gets applied to the inside of the elemen ...

htmlcsscross-browser

How can you ensure that divs stay the same size and appear next to each other without resorting to using

I need assistance with organizing my website layout as shown below: https://i.sstatic.net/Dpof9.png The image div will display an image of variable size, which needs to be vertically and horizontally centered. The text div will contain a large amount of ...

htmlcss

Adding and removing dynamic fields with Bootstrap functionality

Recently, I've been trying to develop a feature where users can add and remove fields by clicking on a button. However, I've encountered a roadblock in my progress. If you take a look at this CodePen link, you'll see what I have so far. My a ...

javascripthtmltwitter-bootstrap

Is there a way to prevent HTML rendering with Javascript within a JSP page?

When a user accesses our site from China, we need to block certain assets to optimize the speed of the site. For example, resources from Facebook need to be blocked from loading altogether. The challenge is that this task must be accomplished using JavaSc ...

javascripthtmljsp

Bulma inquired, "What is the best way to position a button at the center of a

<div class="container"> <button class="btn">Click me</button> </div> <button class="is-centered"> seems to be malfunctioning. ...

htmlcssbulma

Using jQuery to toggle between multiple divs, turning one on while turning off the others

Hey there, I'm currently brainstorming ways to utilize an accordion widget in a unique way. Specifically, I want each h3 trigger to reveal a different div when selected, hiding the previous one in a seamless manner. Picture this - A sleek three ...

jquerytogglehtmlshow-hideslidetoggle

Fade In Effect in Angular 2 Using SwitchCase

Hi everyone, I'm facing an issue with making my switch cases fade in after one is called. Here's what I have so far. When the correct switch case is entered in the input field, I want the current one to fade out and the new one to fade in. How ...

javascriptcssangularjsangular

Define the position of a scrolled area within an HTML document to create a

In my current project, I have a scrollable area that highlights the selected div in gray. The HTML is written using Ember (hbs) and includes code to handle this functionality. Below is an example of how the div looks: https://i.sstatic.net/T2Lur.png Here ...

javascripthtmlcssember.js

Triggering a jQuery event upon clicking a link

Trying to achieve a specific functionality here. Clicking on an image triggers a lightbox, but right-clicking and opening in a new tab should lead to a different page. Instagram has a similar feature that I'm aiming for. Using <a href=""> doesn& ...

javascriptjqueryhtml

Steps for converting SCSS to CSS using node-sass

I have a main.scss file with numerous imports from other .scss files. Whenever I make changes to any of the *.scss files, the master.css file is automatically generated. I rely solely on NPM for my build process and do not use Gulp or Grunt! It's imp ...

cssnode.jssassnpmnode-sass

Utilize JavaScript to iterate through a JSON object and retrieve the indices that meet the specified criteria

While I found a previous answer that somewhat addresses my issue, I am seeking guidance on how to return an array of the indexes where a specific value appears. For example, if **18A38** is the target value, it should return the positions [1,3]. The sampl ...

javascripthtmljson

Table formatting problem

I am looking to add borders only below each row in my table. td{ border-bottom-style: solid;} However, I am noticing a visible border break between columns. Can anyone advise on how to remove that? ...

htmlcsscss-tables

Halting the execution of a jQuery function when a condition is true

Currently in the process of building a website for my new brand, I am faced with a challenge while working with jQuery for the first time. Specifically, I am encountering issues related to the state of a specific div. The code contains if statements that ...

javascriptjqueryhtml

Displaying HTML with extracted message form URL

I have a link that redirects to this page Is there a way for me to extract the message "Message Sent Successfully" from the URL and display it in the form below? <form action="send_form_email.php" name="contactForm" method="post"> //I want to d ...

javascriptphpjqueryhtml

Create dynamic cells for CSS grid using JavaScript

I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the exa ...

javascripthtmlcssalgorithm

When trying to run the code locally, JS and Bootstrap seem to have trouble functioning together, despite

Check out my codepen project here: https://codepen.io/ldrumsl/pen/ZxdZwa Below is the JavaScript code: $('#datetimepicker1').datetimepicker(); $('#datetimepicker2').datetimepicker(); Downloaded index.html file content: <!DOCTYPE ...

javascriptcssbootstrap-4codepen

Steps to modify the border width upon gaining focus

I am struggling to adjust the border width when my input box is focused. Currently, it has a 1px solid border which changes to a 2px different color solid border upon focus. However, this change in border width is causing the containing div to shift by 1px ...

javascripthtmlcssinputborder

deactivating image mapping on mobile media screens

I'm looking to disable my image map on mobile screens using media queries. I've attempted to include some javascript in the head of my html file, but I encountered an error: <script src="http://code.jquery.com/jquery-1.11.3.min.js"></s ...

javascriptjqueryhtmlcssimagemap

Adjusting the content of a span causes the parent element to shift to the left

I'm having trouble finding a solution to a specific issue that seems to be only affecting Chrome. Whenever I try to replace the text in a span element, it causes the parent anchor to shift left. You can see a demonstration of this problem here: http:/ ...

htmlcssgoogle-chrome

Guide on validating a dropdown using template-driven forms in Angular 7

Having trouble validating a dropdown select box, possibly due to a CSS issue. Any suggestions on how to fix this validation problem? Check out the demo here: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.compo ...

csstypescriptvalidationangular8