What is the best way to create a complete margin separation between two unrelated elements?

Here is the code snippet I am currently working with:

HTML

<div class="container">
  <div class="limit">
    &nbsp;
  </div>
  <div class="dots">
    &nbsp;
  </div>
</div>

CSS

.container 
{
  background-color:blue;
  width:100%;
  height:100px;
  position:relative;
}

.limit
{
  position:relative;
  width:500px;
  height:100%;
  margin:auto;
  background-color:green;
}

.dots 
{
  background-color:red;
  position:absolute;
  top:40px;
  right:20%;
  width:200px;
  height:20px;
}

I am facing an issue where I am unable to move the .dots element within the .limit (which was auto-generated by a plugin). My goal is to position the red element inside the green element dynamically, at any width of the .container, using pure CSS. Basically, I want the red element to align perfectly within the green element regardless of the container's width. You can see the desired outcome here.

Is there any way to achieve this? I tried using calc function but couldn't get it to work.

htmlcss

Answer №1

To achieve this, you can utilize the calc() function and specify right as 

(total container width - width of the limit) / 2

calc((100% - 500px) / 2)


.wrapper {
  background-color: pink;
  width: 100%;
  height: 200px;
  position: relative;
}
.limitation {
  position: absolute;
  width: 500px;
  height: 200px;
  margin: auto;
  background-color: purple;
}
.points {
  background-color: orange;
  position: absolute;
  top: 80px;
  right: calc((100% - 500px) / 2);
  width: 300px;
  height: 30px;
}
<div class="wrapper">
  <div class="limitation">
    &nbsp;
  </div>
  <div class="points">
    &nbsp;
  </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

Interactive image rotator featuring navigation buttons for next and previous slides

I recently followed a tutorial from W3Schools Now, I am looking to enhance it by adding previous / next buttons for the indicators, rather than for the slider itself Here is what I aim to accomplish: https://i.sstatic.net/qH1PQ.png Below is the code sn ...

javascriptjqueryhtmlcss

Using GreenSock to animate and manipulate the tween function's parameters

I have two functions that are called on mouse events: function menuBtnOver(e){ var b = e.data; b.setPosition(b.x, b.y+5); } function menuBtnOut(e){ var b = e.data; b.setPosition(b.x, b.y-5); } Additionally, there is another function: setP ...

javascriptjquerycsstweengsap

The span exits the external div only once the animation has concluded

I utilized jQuery to create an animation effect: http://jsfiddle.net/rxCDU/ UPDATE: Please note that this effect is optimized for Chrome browsers! The animation works correctly, however, the green SPAN element moves out of the red DIV only after the ani ...

jquerycssanimationjquery-animate

Customizing Image Layout with jQuery Masonry - Tips for Aligning Images

I've successfully created a jQuery masonry layout that showcases recent posts from various categories on the homepage. However, I'm facing two challenges and seeking help to address them: How do I remove the small white gaps beneath some ima ...

phpjqueryhtmlcss

Tips for adding an image to HTML after clicking on a div element

Is there a way to prompt users to upload an image by clicking on a <div> that contains an <img>? The current code I have is: <div class="container"> <img src="..." alt="Profile image" class="profileImg"> ...

html

When the page initially loads, the block appears on top of the upper block and remains in place after the page is refreshed

Upon initial loading, the block appears on top of another block but remains fixed upon page refresh. The same issue occurs in the mobile version of the site and occasionally displays correctly. The website is built on WordPress and optimized using Page Spe ...

javascriptphpjqueryhtmlbootstrap-4

What is the process of creating a download link for a server file in a web browser?

I am attempting to create a straightforward download link for a PDF file that users can upload and then have the option to download. I would like this download feature to appear either in a pop-up box or simply on the Chrome download bar. Despite trying v ...

javascriptphpjqueryhtmlpdf

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

My generated code cannot be directly modified due to its association with a large JS code. A portion of this code creates an SVG shape, which I attempted to override through CSS. However, my solution does not function properly in Firefox! Below is the ori ...

cssfirefoxsvg

Progress Bars Installation

For more detailed information, visit: https://github.com/rstacruz/nprogress After linking the provided .js and .css files to my main html file, I am instructed to "Simply call start() and done() to control the progress bar." NProgress.start(); NProgress. ...

javascriptcssprogress-bar

Create a choppy distortion effect using CSS filters in Google Chrome

Currently working on a hover effect that enhances image brightness and scales the image during hover. However, I am experiencing some choppiness in the transform animation due to the CSS filter. It's strange because it appears to be smooth in Safari a ...

cssgoogle-chromepugstylus

Is there a way to automatically scroll to a sidebar item when clicking on a marker?

Is it possible to make the sidebar scroll to the item clicked on the marker? I saw this functionality on a website like this one. Any ideas on how to achieve this would be appreciated. Thanks! This div contains map id & side_bar id. <div style="wi ...

javascriptjqueryhtmlcssgoogle-maps-api-3

Guide on incorporating a dropdown menu within a Jssor slider

I am facing an issue with trying to include a dropdown menu inside the Jssor slider. The menu does not drop down when placed inside it. Here is the code snippet: <head> <script src="jquery.js"></script> <script src="jssor.slider.min. ...

javascriptjqueryhtmlcssjssor

Capture a screenshot of the icons

I'm curious about displaying specific parts of images in a React Native application. class InstaClone extends Component { render() { return( <View style={{ flex:1, width:100 + "%", height:100 + "%" }}> <View style={st ...

javascriptcssreactjsreact-native

Bootstrap - Keeping track of the collapse state of <div> elements after page refresh

Looking for some guidance as a javascript/jquery beginner - I am utilizing Bootstrap along with data-toggle and collapse classes to display or hide divs. I have been searching online trying to find a solution that will maintain the state of all divs, wheth ...

javascriptjquerycsstwitter-bootstrap

store JSON data within an HTML list element

I've been working on a JavaScript script that allows me to generate list items in HTML. Right now, I have functionality to drag and remove the items using another script. However, I am interested in adding some additional information to each list item ...

javascripthtmljsonlist

Distinguish using section class in Selenium

Currently grappling with a Python selenium issue, I need to extract and print an email address in my code: [email protected] Just looking for a hint... HTML: <section tabindex="-1" class="pv-profile-section pv-contact-info artdeco- ...

pythonhtmlselenium-webdriverweb

Position an image in the center and add a div below it

I am seeking guidance regarding two specific questions. My objective is to showcase an image in its true size while positioning it at the horizontal center of the screen (not the exact center), followed by a div containing text directly underneath the imag ...

htmlcss

Column-count can result in the flex div dividing the element into two parts

Whenever I utilize column-count with nested divs that have display: flex set, I encounter a problem where elements are cut in half. The suggestion from this answer is to use display: inline-block to prevent this issue. However, when I implement that soluti ...

htmlcssflexboxvuetify.jscolumn-count

WordPress does not allow self-referencing within the same site

I am currently working on a wordpress site and I am trying to create a link that directs to a specific section on the same page. This is the code I am using: <a href="#offer" target="_self">test</a> And here is the code for the landing secti ...

htmlwordpress

Learning how to extract data from a JSON file using JavaScript

One of the challenges I'm facing involves a JSON file that looks like this: { "residents": [ { "name" : "Jacob", "title" : "King", "gender" : "Male", }, { "name" : "Luthor", ...

javascripthtmljsonweb