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

I need to style a blockquote so that it floats to the right, but I also want it to be

Clicking on the parent div with a Jquery onclick event does not trigger when the child image is clicked

AngularJS - Sending configuration values to a directive

Is it possible to reposition the vertical scrollbar to a location that is not on the left or right side?

Cursor hovers over button, positioned perfectly in the center

Tips for Minimizing DIV Space with the Flex Property

The font weight is failing to take effect

The div is empty when trying to display Google Maps

Alert-Enabled Random Number Generation Tool

Tips for inserting a footer at the bottom of every page during the conversion process from HTML to PDF

What steps can I take to prevent BeautifulSoup from interpreting commas as tab characters?

The CSS display:block property isn't functioning as intended

Learn how to efficiently import scripts and styles from WordPress plugins with the help of the wp_enqueue_script function

Creating a responsive 'media object' in Bootstrap 4: Tips and tricks

Utilize CSS to ensure that the hover effect of the main navigation remains active even when the mouse hovers over the sub-menu

Using HTML5 and CSS transitions to scale an image within a 960 grid layout

The border should not start at the left of the page; instead, I would like it to begin at the letter "T" in "Tech."

Having trouble getting an HTML form with PHP to successfully save data into a MySQL database server

Using CSS to create a color combination of black with varying opacities

Ways to make an image wander aimlessly across a webpage while also spinning as it moves (with the help of jQuery or CSS)