Ways to position an icon in line with an element rather than the text within the

I currently have an issue where my svg icon and span element are positioned side by side. Unfortunately, when the text inside the span element overflows, the svg icon also moves down with it. This behavior is not what I want.

Here's a demonstration of the problem:

If you take a look at Section 1, the arrow icon remains properly aligned. However, in Section 2, it shifts along with the overflowing text.

Below is the HTML code snippet for reference:

.rightContent {
  border: 2px solid green;
  height: 100vh;
  overflow-y: scroll;
}

.sectionHeading {
  background: #f7f9fa;
  text-align: left;
  font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto, segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02rem;
  font-size: 1rem;
  padding-top: .75rem;
  padding-bottom: 1.05rem;
}

.sectionHeading p {
  padding: 0;
  margin: 0;
}

.sectionHeading svg {
  float: right;
}

.sectionHeading small {
  font-size: 0.75rem;
  font-weight: 500;
}
<div class="rightContent col col-lg-3 col-md-3 sol-sm-3" style="border: 2px solid green;">
  <!-- Section 1: Introduction -->
  <div class="row">
    <div class="card">
      <div class="sectionHeading">
        <span>Section 1: Introduction</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
          <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
        </svg>
        <p></p>
        <small>14 / 14 | 1hr 5min</small>
      </div>
    </div>
  </div>

  <!-- Section 2: Experience -->
  <div class="row">
    <div class="card">
      <div class="sectionHeading">
        <span>Section 2: Experiences In The Corporate World</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
          <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
        </svg>
        <p></p>
        <small>19 / 19 | 2hr 15min</small>
      </div>
    </div>
  </div>
htmlcss

Answer №1

To ensure proper sizing, adjust the max-width or width of the span tag. Since the width of the svg tag is 16px, consider setting the max-width of the span tag to calc(100% - 16px).

Give it a try!

<style>
.sectionHeading span{
    display: inline-block;
    max-width: calc(100% - 16px);
}
</style>

Answer №2

If you want to achieve the best result in your scenario, consider using positions and make your .sectionHeading or .card the relative element.

Give it a try:

.sectionHeading { /* you can also utilize your .card div */
   position: relative;
}

svg { /* you may assign a class name here as well */
  position: absolute;
  top: 0;
  right: 0;
}

Remember that you might need to include padding to your relative element to prevent the svg from touching the border.

Answer №3

  1. I noticed a few minor issues, such as an empty p tag, which I resolved.
  2. To address the problem, I grouped the small & span tags in a container and applied the d-flex justify-content-between classes to sectionHeading since you are using Bootstrap.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.rightContent {
  border: 2px solid green;
  height: 100vh;
  overflow-y: scroll;
}

.sectionHeading {
  background: #f7f9fa;
  text-align: left;
  font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto, segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02rem;
  font-size: 1rem;
  padding-top: .75rem;
  padding-bottom: 1.05rem;
}

.sectionHeading p {
  padding: 0;
  margin: 0;
}

.sectionHeading svg {
  float: right;
}

.sectionHeading small {
  font-size: 0.75rem;
  font-weight: 500;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e455a4558">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="rightContent col col-lg-3 col-md-3 sol-sm-3" style="border: 2px solid green;">
  <!-- Section 1: Introduction -->
  <div class="row">
    <div class="card">
      <div class="sectionHeading d-flex justify-content-between">
        <div>
          <span>Section 1: Introduction</span><br/>
          <small>14 / 14 | 1hr 5min</small>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                                <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
                            </svg>
      </div>
    </div>
  </div>

  <!-- Section 2: Experience -->
  <div class="row">
    <div class="card">
      <div class="sectionHeading d-flex justify-content-between">
        <div>
          <span>Section 2: Experiences In The Corporate World</span><br/>
          <small>19 / 19 | 2hr 15min</small>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                                <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
                            </svg>
      </div>
    </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

Troubleshooting: Absence of Link Style in Lotus Notes 8.5 Email Client

While creating an HTML email and testing it with Litmus, I noticed that Lotus Notes 8.5 is not showing any link styles. Despite using traditional methods to ensure compatibility with older mail clients, the links are still not displaying correctly in Lotus ...

htmlcssemailhtml-email

Optimizing CSS With jQuery During Browser Resize

I am currently facing an issue with recalculating the height of the li element during window resizing or scrolling. Strangely, on page load, the height is no longer being re-calculated and set to the ul's child height. Here is the code I have written ...

javascriptjquerycss

External style sheet link is not operational

Inside base.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Base</title> <style> body { background: blue; } </style> </head> <body> &l ...

phphtmlcss

Creating tables with equal column width in Bootstrap 5

Is there a method to ensure equal width for all columns in a bootstrap table? By default, it appears to allocate more space to columns with larger content, but I want them all to have the same width. Below is my code: <table class="table table-hove ...

htmlcssbootstrap-5

Click to trigger image rotation with JavaScript

img { display: block; margin: 20px; width: 50px; height: 50px; } .crossRotate { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: -webkit-tran ...

javascripthtmlcssimagerotation

Utilizing CSS to showcase sub-categories alongside primary categories following PHP rendering

1: In my database I have a hierarchical table of categories: 2: I created a PHP script to convert this table into HTML: 3: The resulting HTML code is as follows: <script> function toggleSubCategories(button) { ...

phpjqueryhtmlcsstwitter-bootstrap

Fading in and out numerous DIVs with the magic touch of jQuery

Can you lend a hand with my jQuery dilemma? My brain is fried just thinking about it. This is the structure I'm dealing with: <div id="trigger-1">Trigger 1</div> <div id="trigger-2">Trigger 2</div> <div id="trigger-3">T ...

jqueryhtmlfadeinfadeout

Java Selenium throws a locating element exception that cannot be found

Encountering an unexpected Unable to locate element error, without clear reasons. Visit the site: Here is the provided code: package artifactidshilpipackage; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium ...

javahtmlselenium-webdriveriframewebautomation

Button in HTML not responsive to clicks

I'm facing an issue with my HTML button as it's not clickable at all. I suspect it may be related to incorrect div settings or a background issue. Can someone advise on what setting needs to be changed for the "sign the petition" link to become ...

phphtmlbuttonclick

The system is unable to retrieve the value of the property which is set as null

I'm trying to figure out how to store the input value of name_enter into the variable userName. However, every time I attempt this, I encounter the following console error: Uncaught TypeError: Cannot read property 'value' of null function ...

javascripthtmlcss

Is it feasible to integrate HTML (UIWebView) with Cocos2d-x?

As I dive into experimenting with cocos2d-x, I've successfully built and run the Javascript samples for Android within a browser. Now, as someone with a background in HTML, I'm eager to create my own game using HTML tags and CSS instead of relyi ...

androidhtmluiwebviewcocos2d-x

Customize your Bootstrap hamburger menu with a unique open and close button design

Currently, I am in the process of creating a hamburger menu with Bootstrap and I have managed to customize the open and close buttons according to my preferences. However, I am facing an issue where the hamburger icon is not displaying properly. See the c ...

htmlcsstwitter-bootstrap

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

What is the proper way to map a list of images returned using getStaticProps? I had successfully implemented this by passing a prop to the gallery component in another page. However, I now want to consolidate all the getStaticProps code within the gallery ...

javascripthtmlreactjsnext.js

Is there a way to ensure that a DIV element expands to the bottom of the page once scrolling has occurred?

Trying to create a webpage with a specific layout: Everything looks good, but if the content on the right goes off the page and requires scrolling, the left menu bar ("second_navbar") doesn't stretch to the end of the page. I've attempted chang ...

htmlcssnavbar

What is the method for selecting an li element within a ul list using Selenium in Python?

My goal is to automate the process of clicking on 'National Data' on a specific website using the Selenium package in Python. The website I am referring to can be found at . Although I attempted to achieve this automation, I encountered difficul ...

pythonhtmlselenium

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-co ...

javascriptcssangulartypescripttabulator

Guide to placing an image in a designated position

I am looking to achieve the following scenario: Whenever a user uploads an image, it should appear in one of the smaller boxes on the right. Subsequent image uploads by clicking on the big box should populate the other small boxes on the right. Please refe ...

javascripthtmlimage

Contrasts between space and the greater than selector

Can you explain the distinction between selector 6 and selector 7 as outlined on the w3 website? Inquiring minds want to know. ...

htmlcss

The constant increase in page header number leading to minor interruptions during page scrolling

On my website, I have a dynamic page header that shows the number of comments a user has scrolled through. You can see this feature in action here: However, there seems to be a slight jitter on the screen every time the comment counter updates... To disp ...

htmlangularionic-framework

Modify the color of a sub division's background using CSS when hovering over

As I work on this Fiddle, my goal is to change the background of each div section individually when moused over. However, currently, hovering over one section triggers the background change for all sections. Is there a way to ensure that only the specific ...

htmlcss