Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Question

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Allow me to provide a clearer explanation here:

Imagine an element placed on a webpage with a margin of 10% from the left side. When the size of the page is adjusted, the margin on the left decreases accordingly - for example, 10% from 1400px - 140px, and 10% from 1000px - 100px. This is a fairly straightforward concept.

Now, how can we achieve a similar effect for an element on the right side? When the browser width is 1400px, the margin on the right should be 140px. As the browser width changes to 1000px, the margin on the right should adjust to 100px.

I apologize for not being able to provide a visual example at this time.

html css responsive-design

Answer 1

Answer №1

To achieve this, you can utilize the viewport width property.

.box {
    padding-left:8vw;
}

Answer 2

To achieve this, you can utilize the viewport width property.

.box {
    padding-left:8vw;
}

Answer 3

Answer №2

I believe your question may need more detail in order to provide an accurate answer. However, I will present you with a few possible solutions that could assist you.

Potential Solution 1

 body {
    position: relative;
}

.element {
    position: absolute;
    right: 10%;
}

Potential Solution 2

 body {
    position: relative;
}

.element {
    position: absolute;
    margin-right: 10vw;
}

Potential Solution 3

body {
    padding-right: 10%;
}

body {
    background-color: #FEFEFE; 
    height: 650px;
    direction: rtl;
    position: relative;
}

.container {
    width: 100%;
    padding-right: 10%;
    height: 100%;
}

.element {
    width: 200px;
    height: 100px;
}

.first {
    background-color: red;
}

.second {
    position: absolute;
    background-color: blue;
    margin-right: 10%;
    top: 120px;
    right: 0;
}

.third {
    position: absolute;
    background-color: green;
    right: 10%;
    top: 240px;
}

<body>
  <div class="container">
    <div class="element first">
       <h3>first div</h3>
    </div>
    <div class="element second">
       <h3>second div</h3>
    </div>
    <div class="element third">
       <h3>third div</h3>
    </div>
  </div>
  
</body>

Answer 4

I believe your question may need more detail in order to provide an accurate answer. However, I will present you with a few possible solutions that could assist you.

Potential Solution 1

 body {
    position: relative;
}

.element {
    position: absolute;
    right: 10%;
}

Potential Solution 2

 body {
    position: relative;
}

.element {
    position: absolute;
    margin-right: 10vw;
}

Potential Solution 3

body {
    padding-right: 10%;
}

body {
    background-color: #FEFEFE; 
    height: 650px;
    direction: rtl;
    position: relative;
}

.container {
    width: 100%;
    padding-right: 10%;
    height: 100%;
}

.element {
    width: 200px;
    height: 100px;
}

.first {
    background-color: red;
}

.second {
    position: absolute;
    background-color: blue;
    margin-right: 10%;
    top: 120px;
    right: 0;
}

.third {
    position: absolute;
    background-color: green;
    right: 10%;
    top: 240px;
}

<body>
  <div class="container">
    <div class="element first">
       <h3>first div</h3>
    </div>
    <div class="element second">
       <h3>second div</h3>
    </div>
    <div class="element third">
       <h3>third div</h3>
    </div>
  </div>
  
</body>

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Answer №1

Answer №2

Similar questions

FormView does not have a defined namespace prefix asp - How should I specify my Page Directive?

Bypass the save as dialogue box and initiate automatic file download without interruption

Webster Barron code script

Height of dropdown items in the horizontal navbar

Processing PHP forms with dynamic form inputs

The TypeScript error reads: "An element is implicitly assigned the 'any' type because an expression of type 'any' cannot be used to index a specific type."

Numerous hyperlinks leading to different products within the same image

"Enhancing webpage dynamics with jQuery: Exploring the

Using Bootstrap 3 to create a carousel with a seamless fading transition as the background

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

Adjust the code to enhance the functionality of web components in Sharepoint

Arrangement of images in an array

Inserting information into a SQL database using PHP

Ensuring that two operators are not consecutively placed in a Javascript calculator-validation guide

What is the secret behind Redactor JS's ability to display properly indented code snippets?

Use jQuery to trigger a click event when an element is in focus, unless it was clicked to

Newbie Query: How can I apply various font weights to a single font within the same stylesheet?

What is the most effective way to add HTML from a dynamically loaded document using AJAX?

Guide to adding a theme switcher feature to your current React website

What is the process for implementing custom CSS styles in Cognos?