'CSS: right : 0px ; property is not working

The code is as follows:

.form-wrapper {
  border: 1px solid rgb(68, 240, 0);
  background-image: radial-gradient(rgb(252, 252, 252), #ffffff);
  border-radius: 20px;
  width: 400px;
  position: relative;
  padding: 10px 40px;
  margin: 10px auto;
}

.close-button {
  position: absolute;
  right: 0px;
  left: auto;
  border: 1px solid rgb(240, 0, 0);
  width: 40px;
}

.form-header {
  border: 1px solid rgb(232, 0, 240);
  position: relative;
  text-align: center;
}

.form-header h3 {
  display: inline;
}

.form-outline {
  border: 1px solid rgb(237, 250, 235);
  border-radius: 20px;
  padding: 5px 30px;
}

.form-field {
  margin-top: 5px;
}

.form-field input {
  outline: none;
  width: 100%;
  display: block;
  padding: 5px;
  font-size: 15px;
  border: 2px solid rgb(179, 177, 177);
  border-radius: 6px;
  background-color: rgba(227, 247, 250, 0.918);
}

.form-field small {
  display: block;
  visibility: hidden;
}
<div class="form-wrapper">
  <div class="close-button"><i class="far fa-times-circle "></i></div>
  <div class="form-header">
    <!-- <div style="border: 2px solid aqua;"></div> -->
    <h3> Lets talk!</h3>

  </div>

  <form class="form-outline">
    <div class="form-field">
      <label class="field-title">Name </label><br>
      <input type="text" id="" value="" placeholder="Enter your name."> <br>
      <small class="error-message">Error message</small>
    </div>

    <div class="form-field">
      <label class="field-title">Phone </label><br>
      <input type="text" id="" value="" placeholder="Enter your phone number."> <br>
      <small class="error-message">Error message</small>
    </div>

    <div class="form-field">
      <label class="field-title">Organization </label><br>
      <input type="text" id="" value="" placeholder="Enter your organization's name."><br>
      <small class="error-message">Error message</small>
    </div>

    <div class="form-field">
      <label class="field-title">Address </label><br>
      <input type="text" id="" value="" placeholder="Enter your address."> <br>
      <small class="error-message">Error message</small>
    </div>

    <div class="form-field">
      <label class="field-title">Email </label><br>
      <input type="text" id="" value="" placeholder="Enter your email."> <br>
      <small class="error-message">Error message</small>
    </div>
  </form>
</div>

The result looks like this.

I want to move the "close button" to the right side sticking to the green border of form-wrapper div. The right property is not working. I don't know if it is a silly mistake or lack of knowledge. Any help or direction would be appreciated. I tested the right property using another html file and it is working perfectly. But I could not move this close button to right.

htmlcss


Solution 1:[1]

try to add this to your close-button class. it worked for me.

.close-button {
direction: rtl;
}

Solution 2:[2]

Your code is fine and should work propely. Maybe your styles without right: 0px; is cached by browser. Try to open your project in new private / incognito tab. It prevents browser to read cached styled.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fatemeh Talebi
Solution 2 Dominik Misiek

Related Questions