What's the secret to creating floating content in one go?

Here is the code I am working with:

<div class="coupon-price">
  <div class="">
    <span class="coupon-new-price"> 65.000</span>
  </div>
  <div class="">
    <span class="coupon-old-price"> 130.000</span>
  </div>
  <div class="disc" style="width:31px;height:31px;position: absolute;float:right;right:6px;z-index:10000;background: red;color:white;border-radius: 70px;line-height:31px;text-align:center;font-size:10px;">
    50%
  </div>
</div>

I am wondering how to align the red circle properly with the price?

htmlcss

Answer №1

I've made some adjustments to align the disc with the price. Let me know if this resolves the issue.

<div class="coupon-price">
<div class="">
         <span class="coupon-new-price"> 65.000</span>
    </div>
    <div class="">
         <span class="coupon-old-price"> 130.000</span>
    </div>

   <div class="disc" style="width:31px;height:31px;position: absolute;float:right;right:6px;z-index:10000;background: red;color:white;border-radius: 70px;line-height:31px;text-align:center;font-size:10px; top: 5px">

         50%
   </div>

   </div>

Answer №2

If my understanding is correct, take a look at the code snippet below which could potentially provide some help for you.

<div class="discounted-price">
    <div class=""> <span class="new-price"> 65.000</span> </div>
    <div class="" style="position: relative;"> <span class="old-price"> 130.000</span>
        <div class="discount-tag" style="width:31px;height:31px;position: absolute;float:right;right:6px;z-index:10000;background: red;color:white;border-radius: 70px;line-height:31px;text-align:center;font-size:10px; top:0;"> 50% </div>
    </div>
</div>

Answer №3

Are you looking for something similar to the following:

HTML

  <div class="offer-price" style="position: relative;padding-right:50px;">
    <div class="">
         <span class="offer-new-price"> $65.00 </span>
    </div>
    <div class="">
         <span class="offer-old-price"> $130.00 </span>
    </div>

   <div class="discount" style="width:31px;height:31px;position: absolute;right:6px;z-index:10000;background: red;color:white;border-radius: 70px;line-height:31px;text-align:center;font-size:10px;top:0;bottom:0;margin:auto;">

         50% OFF                    
   </div>

   </div>

Answer №4

Fiddle

Source

If you plan on employing absolute positioning for an element, it's crucial to fully grasp its functionality before implementation. Refer to the source for detailed information and examine the fiddle for the expected outcome.

.coupon-price {
  float:left;
  position:relative;
}
.coupon-price:after {
  clear:left
}
.disc {
  position:absolute;
  top:0px;
  right:-50px;
  width:50px;
  height:50px;
  line-height:50px;
  border-radius:50%;
  background-color:#f00;
  text-align:center;
}

Answer №5

To ensure position absolute works correctly, make sure to have a parent element with a position relative set. Additionally, add padding-right:50px to the parent div to create space for displaying the red circle.

Keep in mind that if you wish to position the red circle on the right side of the page, you should remove display: inline-block; from the main div.

<p>test</p>

<div class="coupon-price" style="position:relative; border:1px solid silver; display: inline-block; padding-right:50px">
<div class="">
         <span class="coupon-new-price"> 65.000</span>
  </div>
  <div class="">
    <span class="coupon-old-price"> 130.000</span>
  </div>

  <div class="disc" style="position: absolute; right:6px; top:3px; width:31px; height:31px; z-index:1000; background: red; color:white; border-radius: 70px; line-height:31px; text-align:center; font-size:10px; "> 50%
 </div>

</div>

Answer №6

Take a look at the code snippet below:

.disc {
  width: 31px;
  height: 31px;
  position: absolute;
  right: 0;
  top:10px;
  z-index: 10000;
  background: red;
  color: white;
  border-radius: 70px;
  line-height: 31px;
  text-align: center;
  font-size: 10px;
}

.coupon-price {
  position: relative;
  border: 1px solid
}

.price * {
  display: block;
}

.price {
  padding: 10px;
}
<div class="coupon-price">
  <div class="price">
    <span class="coupon-new-price"> 65.000</span>

    <span class="coupon-old-price"> 130.000</span>
  </div>

  <div class="disc" style="">

    50%
  </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

An additional pixel extending the entire width of 100%

I have a textarea that is 680 pixels wide, but I need to make it fluid by using percentages. When I use percentages to achieve a perfect 100% width, it seems to render 1 pixel more than it should. Here is the link to see the issue in action. ...

csswidthrenderingpixelpercentage

What causes the test div's height to increase when using position:absolute?

The div.test was initially set with a height of auto, meaning no fixed height. .test { top: 0px; right: 0px; bottom: 0px; left: 0px; background: yellow; width: 200px; height: auto; padding: 10px; } <div class="test"> This is some ...

htmlcss

What is the best way to ensure that the drop shadow on the bootstrap carousel is not confined by the parent element?

I'm currently using bootstrap's carousel to display items, and I've noticed that the box-shadow attribute on my item blocks is being limited by the parent element that wraps it. https://i.sstatic.net/ks5lC.png Is there a way for me to ensu ...

cssbootstrap-4frontend

Adding a hyperlink to each table cell (td) in HTML and CSS that is visible outside of the table

In my table, there is a link on every td. I want these links to appear outside the table. Although I have achieved this, the first cell that was created needs to be hidden. When I try to hide the td using CSS, the link also disappears. Here is the HTML: ...

htmlcss

Guide on verifying the ng-valid status of all inputs within an AngularJS table

I'm working with a table where each row contains an input field. Here's the code snippet: When the save button is clicked, I need to go through each input and determine if it's ng-valid. <div class="line" data-ng-repeat="data in datas"& ...

javascriptangularjshtmlvalidation

What steps can I take to ensure that both of my codes are functioning properly in order to consistently operate the D3?

In my index.php file, I have HTML code that loads a d3 liquid gauge. When I open this in a browser with a static integer inserted into the code, it works perfectly. Then, I have another file called Tdata.php which queries MySQL and returns a table in JSON ...

phpjsonhtmld3.jsraspberry-pi

jQuery issue: Inability of "Read More" span to reappear after clicking "Read Less"

Currently in the process of creating a portfolio website that showcases project descriptions with an excerpt, revealing full details upon clicking "Read More." My experience with jQuery is limited, but I managed to implement functionality where clicking "R ...

javascriptjqueryhtmlcss

The download attribute in HTML5 seems to be malfunctioning when used within a React environment

I am experiencing an issue where the download button is not working as intended. Instead of downloading the images, it is redirecting to another page. I have tested this on multiple browsers, including Chrome, Edge, and my mobile device, but the problem pe ...

javascripthtmlreactjs

Out-of-sync movement in animated characters

Looking for some assistance with my page coding. I have a scenario where two stars are moving around a button, simulating an animation by incrementing the CSS properties top and left. Initially, everything appears fine and they move synchronously. However, ...

javascripthtmlcssanimation

The shadow effects and color overlays do not seem to be functioning properly in Mozilla Firefox

I have designed a popup registration form using the Bootstrap modal class. To ensure form validation, I have integrated some jQuery validation engine functionality. Additionally, I customized the appearance by adding a box shadow, adjusting the background ...

javascriptjqueryhtmlcsstwitter-bootstrap

Upon reaching a specific milestone on the page, automatically scroll to the designated anchor point

Here's the deal: I plan to showcase 4 divs on my page. Each div will have a specific height (around 1500px) but will span the full width of the screen. To add some flair, each div will be a different color. My goal is for JavaScript to kick in once ...

javascripthtmlcss

Tips for validating input fields in Ionic to display errors after the user has finished filling them out

*Hello, I'm new to working with AngularJS and I'm currently trying to display an error message after the user has finished typing in the input field. However, I'm encountering an issue where the error message appears as soon as I start typin ...

jqueryhtmlangularjsionic-framework

Facing difficulties with the XPATH due to an inability to access specific parts of the HTML code

Currently, I am facing an issue where I need to click on a link using Selenium and Java. When searching for the link using XPath, I am encountering a problem where only white spaces are displayed instead of most of the webpage content. The highlighted link ...

javahtmlseleniumxpath

What is the best way to center a form element and an image link vertically within a div?

I'm having trouble aligning a search form and an image link within a div. I've attempted using 'display:inline', which did place them on the same line, but not in the way I wanted. I also experimented with adjusting width, float, and pa ...

htmlcssformsimagevertical-alignment

Is there a way to stop my <pre> code from being displayed on the page?

Currently, I am utilizing the google code prettifier found at http://code.google.com/p/google-code-prettify/ This tool functions similarly to stack overflow by enhancing and highlighting syntax when a block of code is input. However, I have encountered a ...

javascripthtmlpretty-printprettify

The implementation of an onclick event in a freshly created HTML element is functioning solely on the final element

One issue I encountered was that when I generated page number buttons at the bottom of a page, the onclick event only worked with the last button created. Below is an example of how the page buttons were displayed: https://i.stack.imgur.com/wHwI0.png ...

javascripthtml

Only show a single li element in CSS at a time

I'm working with Angular 2 and I have a list: <ul> <li *ngFor="let show of (ann)"> {{show}} </li> </ul> I want to show one item from the list every 3 seconds in an infinite loop. Here&apos ...

cssangular

Utilizing CSS to Implement a Background Image

Here is where I am looking to upload the image. Ideally, I would like to position my image to the left side of the text related to Food and Travel. You can view the image here. .block-title h3 { color: #151515; font-family: 'Montserrat', s ...

htmlcss

The size of the SVG <g> element remains zero even though it contains children

I inserted some elements into an SVG with one large group. The basic code for the group is as follows: <svg ng-attr-view-box="{{getViewbox()}}" width="100%" height="100%"> <!-- This will be the global group element I reference below --& ...

javascripthtmlcssangularjssvg

Customize the pop-up on a cell within a table based on its specific

I am currently in the process of building a website using Flask that showcases a data table with abbreviated codes for certain values. My main objective is to implement popovers on these cells to display the full meaning when hovered over. For example, the ...

pythonhtmlflaskbootstrap-5popover