What is the best way to place an icon in the lower right corner of a design

I have encountered an issue while building the testimonial section below. The problem arises when the amount of text in each block is not the same, causing the quote icon to be displayed improperly in the bottom right corner. Sometimes, it even extends outside of the testimonial container. My goal is to have it fixed in the bottom right corner.

Below is an image depicting the problem: https://i.sstatic.net/fVgAA.png

#testimonial-2-block {
    padding-top: 35px;
    padding-bottom: 35px;
}

#testimonial-2-block .testimonial-name {
    margin-left: 25px;
    margin-top: 20px;
}

#testimonial-2-block .testimonial-name h4 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

#testimonial-2-block .testimonial-name p {
    font-style: italic;
    font-size: 14px;
}

#testimonial-2-block .testimonial-container {
    background-color: #dff1f4;
    padding: 20px;
    border-radius: 4px;
    position: relative;
    height: 100%;
}

#testimonial-2-block .testimonial-quote {
    content: '';
    position: absolute;
    top: 250px;
    left: 370px;
    font-size: 40px;
    color: #ffffff;
}

#testimonial-2-block .testimonial-text p {
    text-align: center;
    padding-top: 15px;
}

#testimonial-2-block .testimonial-container:hover {
    background-color: #00897B;
    transition: .8s;
    color: #ffffff;
}

.testimonial-container .testimonial-img img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-top: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div id="testimonial-2-block" class="row">
    <div class="col-md-6">
      <div class="testimonial-container">

                            <div class="testimonial-text">
                                <p>"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint. architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod." </p>
                            </div>

                            <div class="testimonial-meta d-flex">
                                <div class="testimonial-img">
                                    <img src="https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="testimonial-name">
                                    <h4>Johanna Kirby</h4>
                                    <p>Digital Marketer</p>
                                </div>
                            </div>
                            <div class="testimonial-quote">
                                <i class="fas fa-quote-left"></i>
                            </div>

                        </div>
    </div>
    <div class="col-md-6">
      <div class="testimonial-container">

                            <div class="testimonial-text">
                                <p>"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum " </p>
                            </div>

                            <div class="testimonial-meta d-flex">
                                <div class="testimonial-img">
                                    <img src="https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="testimonial-name">
                                    <h4>Johanna Kirby</h4>
                                    <p>Digital Marketer</p>
                                </div>
                            </div>
                            <div class="testimonial-quote">
                                <i class="fas fa-quote-left"></i>
                            </div>

                        </div>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Instead of using top and left, try using bottom and right for positioning elements.

By doing this, the item will always remain in the same position, regardless of the size of the parent element.

The solution was actually embedded in your initial question.

How can I align the icon to the bottom right corner?

#testimonial-2-block {
  padding-top: 35px;
  padding-bottom: 35px;
}

#testimonial-2-block .testimonial-name {
  margin-left: 25px;
  margin-top: 20px;
}

#testimonial-2-block .testimonial-name h4 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

#testimonial-2-block .testimonial-name p {
  font-style: italic;
  font-size: 14px;
}

#testimonial-2-block .testimonial-container {
  background-color: #dff1f4;
  padding: 20px;
  border-radius: 4px;
  position: relative;
  height: 100%;
}

#testimonial-2-block .testimonial-quote {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 40px;
  color: #ffffff;
}

#testimonial-2-block .testimonial-text p {
  text-align: center;
  padding-top: 15px;
}

#testimonial-2-block .testimonial-container:hover {
  background-color: #00897B;
  transition: .8s;
  color: #ffffff;
}

.testimonial-container .testimonial-img img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-top: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="testimonial-2-block" class="row">
    <div class="col-md-6">
      <div class="testimonial-container">

        <div class="testimonial-text">
          <p>"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint. architecto porro dicta
            eum. Enim eum pariatur quae tempora maxime quod." </p>
        </div>

        <div class="testimonial-meta d-flex">
          <div class="testimonial-img">
            <img src="https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt="">
          </div>
          <div class="testimonial-name">
            <h4>Johanna Kirby</h4>
            <p>Digital Marketer</p>
          </div>
        </div>
        <div class="testimonial-quote">
          <i class="fas fa-quote-left"></i>
        </div>

      </div>
    </div>
    <div class="col-md-6">
      <div class="testimonial-container">

        <div class="testimonial-text">
          <p>"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum " </p>
        </div>

        <div class="testimonial-meta d-flex">
          <div class="testimonial-img">
            <img src="https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt="">
          </div>
          <div class="testimonial-name">
            <h4>Johanna Kirby</h4>
            <p>Digital Marketer</p>
          </div>
        </div>
        <div class="testimonial-quote">
          <i class="fas fa-quote-left"></i>
        </div>

      </div>
    </div>
  </div>
</div>

Answer №2

Switch from top to bottom:

#testimonial-2-block .testimonial-quote {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 370px;
    font-size: 40px;
    color: #ffffff;
}

Answer №3

only make changes here:

#testimonial-2-block .testimonial-quote {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 40px;
  color: #ffffff;
}

Answer №4

To achieve the desired layout, you can utilize the following CSS properties: display: inline-block and position: relative

#testimonial-2-block .testimonial-quote {
    content: '';
    position: relative;
    left: 110px;
    font-size: 40px;
    color: #ffffff;
    display: inline-block;
    top: 30px;
}


#testimonial-2-block {
    padding-top: 35px;
    padding-bottom: 35px;
}

#testimonial-2-block .testimonial-name {
    margin-left: 25px;
margin-top: 20px;
}

#testimonial-2-block .testimonial-name h4 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

#testimonial-2-block .testimonial-name p {
    font-style: italic;
    font-size: 14px;
}

#testimonial-2-block .testimonial-container {
    background-color: #dff1f4;
    padding: 20px;
    border-radius: 4px;
    position: relative;
    height: 100%;
}

#testimonial-2-block .testimonial-quote {
    content: '';
    position: relative;
    left: 110px;
    font-size: 40px;
    color: #ffffff;
    display: inline-block;
    top: 30px;
}

#testimonial-2-block .testimonial-text p {
    text-align: center;
    padding-top: 15px;
}

#testimonial-2-block .testimonial-container:hover {
    background-color: #00897B;
    transition: .8s;
    color: #ffffff;
}

.testimonial-container .testimonial-img img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

<div class="container">
<div id="testimonial-2-block" class="row">
    <div class="col-md-6">
      <div class="testimonial-container">
            <div class="testimonial-text">
                <p>"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint. architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod." </p>
            </div>

            <div class="testimonial-meta d-flex">
                <div class="testimonial-img">
                    <img src="https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt="">
                </div>
                <div class="testimonial-name">
                    <h4>Johanna Kirby</h4>
                    <p>Digital Marketer</p>
                </div>
            <div class="testimonial-quote">
                <i class="fas fa-quote-left"></i>
            </div>
            </div>
        </div>
</div>
    <div class="col-md-6">
      <div class="testimonial-container">
            <div class="testimonial-text">
                <p>"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum " </p>
            </div>

            <div class="testimonial-meta d-flex">
                <div class="testimonial-img">
                    <img src="https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt="">
                </div>
                <div class="testimonial-name">
                    <h4>Johanna Kirby</h4>
                    <p>Digital Marketer</p>
                </div>
            <div class="testimonial-quote">
                <i class="fas fa-quote-left"></i>
            </div>
            </div>
        </div>
    </div>
</div>
</div>

</body>
</html>

Answer №5

If you have a parent div named testimonial-container and a child div named testimonial-quote, you can ensure the icon appears in the bottom right corner by adding the following CSS code:

.testimonial-container {
   position: relative;
}

.testimonial-quote {
  position: absolute;
  bottom: 0;
  right: 0;
}

It's important to specify the position of testimonial-container as relative to ensure the icon is positioned correctly in the parent container.

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

The peculiar effect of a CSS element's border on surrounding elements is quite unusual

I'm experiencing a strange issue that I can't quite figure out. To demonstrate the problem, I've created a fiddle. What's puzzling me is why applying a border to one of the three canvases causes my other two .headerMainDiv elements to ...

htmlcsscss-position

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

csshtml

picking out a particular set of data from a JSON document

I have a map of Europe along with a JSON file that displays the unemployment rate for each country in the year 2011. The JSON file also includes x and y elements, allowing me to place a blue circle on top of each country on the map. My goal is to be able ...

javascriptjqueryhtmlcssjson

Display HTML content generated by JavaScript in the page source

Can the HTML elements I've added through JavaScript and jQuery codes be displayed in the page source (ctrl+U)? ...

javascriptjqueryhtml

Styling with CSS will keep your content centered on the page, while the background

I'm looking to create a layout with the following specifications: The content wrapper will have a fixed size and be centered: .content { width:960px; margin:0px auto; } My issue is how to implement the left-aligned background bar for the su ...

htmlcss

Modifying form data when submitting a form

Is there a common or widely-used method for modifying or adding form values before they are serialized and sent to the server upon form submission? I'm looking for a way to change or add these values without having to recreate them. I've come ac ...

javascriptjqueryhtml

Tips for adjusting the CSS styles within a jQuery plugin

I need some help with styling the form on my test page located at While using FireBug, I noticed a lot of padding space surrounding the tabs within this div: <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> How can I redu ...

jqueryhtmlcss

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

javascriptjqueryhtmlcssasp.net-mvc

Managing Events for a Menu Item That Cannot Be Selected

As I work on developing a form using Material UI React, my focus is on logging exercise sets to the database. To allow users to select the exercise they wish to log, I have incorporated a list of Material UI Menu Item components as options. Additionally, I ...

htmlreactjsmaterial-ui

What is hindering me from fetching the information stored in my json file?

Currently, I am delving into learning AngularJS by working on a simple webpage for a company. This page will showcase products that are fetched from a json file. Following a tutorial from the AngularJS website, which covers the exact task I aim to achieve, ...

javascripthtmlangularjsjson

Is there a way to use regular expressions to search for class names within nested div elements?

I'm struggling to find nested divs like these in my document object model (DOM) <div class="two-columns some-other-class"> <div class="two-columns some-other-class"> </div> </div> I attempted to search for neste ...

javascriptjqueryhtmlregex

Encountering issues with uploading files using ajax

Developing my own custom CMS requires me to enable file and image uploads. Despite attempting to integrate the blueimp uploader, I encountered difficulties. The goal is to transmit formData through a jquery script to interact with my CMS. In PHP code (rec ...

phpjqueryajaxhtml

Show or hide the right element when clicked using ng-show in AngularJS

My goal is to toggle elements based on which one is clicked, not all at once. For instance, if I have 3 form elements and 3 buttons, when I click on button 1, I only want to toggle the corresponding form element. Here is my current code snippet: In Angu ...

javascriptjqueryhtmlangularjs

CSS3 keyframes hover animation for Firefox

I implemented keyframes animation for a div on mouse hover using pure CSS3. The animation runs smoothly on all browsers (Google Chrome, Safari, IE, Opera) except for Firefox! I'm puzzled as to why it doesn't work only in Firefox. The animation ...

cssfirefoxhoverkeyframe

Prevent Click Event in JQuery

I have a requirement to disable all click events on my webpage. However, even after using the appropriate code to prevent these events from firing, some of them are still getting called. Let me explain with an example. <div id='parent'> ...

javascriptjqueryhtml

dropdown menu items with jQuery toggle feature

Having an issue with a jQuery dropdown menu. Below is the code: $('.item-active, .item').click(function() { $(this).toggleClass('item-active'); if($('h3').hasClass('item-active')) { $(this).siblings ...

jqueryhtml

What is the best way to extract the frameset from a frame window?

Here is a code snippet to consider: function conceal(frameElem) { var frameSet = frameElem.frameSet; //<-- this doesn't seem to be working $(frameSet).attr('cols', '0,*'); } //conceal the parent frame conceal(window.pa ...

javascriptjqueryhtmldomframes

Header rows in the table remain in place, however, the borders shift when viewed on Chrome and do not display at all on Firefox

I'm having trouble with the borders on my header table. In Chrome, the top border disappears when I scroll down, and in Firefox, it simply doesn't appear. You can see the issue here https://codepen.io/anon/pen/zyEwZq#anon-login Check it out on ...

htmlcss

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

javascripthtmltypescriptfunction

Tips for altering value by selecting radio buttons

Currently, I am in the process of developing a website using Adobe Dreamweaver with php. The site includes three buttons that serve as payment method options and act as continue buttons. My goal is to have the selected radio button (I agree button) add a s ...

phpjqueryhtmlcss