The margin-left negative is not functioning when setting the left side at 50%

Question

The margin-left negative is not functioning when setting the left side at 50%

I'm having trouble getting this specific CSS to work on an element:

.element {
  position: absolute;
  left: 50%;
  margin-left: -285px // the element has width: 500px;
}

This element is contained within another div that also has an absolute position.

For some reason, the browser is not applying the margin-left as expected, and I can't figure out why!

To better illustrate my issue, I created a CODE PEN for reference -> http://codepen.io/anon/pen/KpKrmN

Any assistance would be greatly appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

Uncertain of your actions, however, I propose a possible remedy. Consider implementing the following code snippet:

padding-right: calc(50%-285px);

Answer 2

Uncertain of your actions, however, I propose a possible remedy. Consider implementing the following code snippet:

padding-right: calc(50%-285px);

Answer 3

Answer №2

Not completely following, but you might find this codepen helpful: http://codepen.io/anon/pen/jPOQLM

The main change is the use of "block". I transformed your p into a div and positioned it to the right.

<div class="main">
  <div class="interaction">
    Some text
    <br/>
    <span>Other text</span>
  </div> 
</div>

.main {
  position: absolute;
  width: 100%;
  height: 150px;
  top: 180px;
  text-align: center;
  border: 1px solid red;
}

.interaction {
  position: absolute;
  right: 0;
  left: 50%;
  margin-left: -285px;
}

Answer 4

Not completely following, but you might find this codepen helpful: http://codepen.io/anon/pen/jPOQLM

The main change is the use of "block". I transformed your p into a div and positioned it to the right.

<div class="main">
  <div class="interaction">
    Some text
    <br/>
    <span>Other text</span>
  </div> 
</div>

.main {
  position: absolute;
  width: 100%;
  height: 150px;
  top: 180px;
  text-align: center;
  border: 1px solid red;
}

.interaction {
  position: absolute;
  right: 0;
  left: 50%;
  margin-left: -285px;
}

The margin-left negative is not functioning when setting the left side at 50%

Answer №1

Answer №2

Similar questions

What is the method for invoking a class method in Typescript from another method within the same class acting as an event handler?

Ways to confirm if a video has sound

developing a multimedia player using HTML5

Step-by-step guide on integrating a specific location into Google Maps using React.js

Leveraging webpack alongside url-loader for embedding images within React applications

Tips for creating a horizontally expandable container that adjusts after overflowing

An error with code -4058 occurred when I tried to execute the command npm run start-rewired

Utilize the Magento extension to seamlessly integrate JavaScript code into the head section of your website

Using jQuery to create a script that will transition random images simultaneously within a div

Optimal code structuring for a javascript plugin

utilizing the data provided by a user in the "prompt" window within my HTML code

What is the best way to incorporate a fixed-position button that spans the full width of the screen?

Sending an array using PHP through AJAX in jQuery to a separate PHP script

Tips on aligning text link to the right within li using CSS

Angular4 is throwing an error stating that the center element in the HTML is an undefined function

Having an issue where my form is automatically submitted before the data from the database is fetched to display after scanning a product barcode in a field

Associate the right-click action with Angular Material

Tips on ensuring a div containing an image element has equal height as the image

Switching Styles in React applications

Massive React State Array containing hundreds of Input elements, sluggish state updates triggered by onChange events