Reputation: 3797
How can I add N pixels to a div's width, but append that extra width to the left side of the div?
For example, simply increasing its width by 20px will add 20px to the right side.
On the other hand, I could add left-padding
but that doesn't quite cut it for me.
Is there a way to genuinely expand the div to the left using CSS or Javascript?
Same question about expanding to the top instead of expanding to the bottom if height is changed.
Upvotes: 2
Views: 3261
Reputation: 372059
Here are some possible options:
direction
property to make the writing mode RTL.flex-direction: row-reverse
for the width problem.flex-direction: column-reverse
for the height problem.div {
direction: rtl;
width: 400px;
/* width: 450px; */
background-color: lightgray;
height: 25px;
}
p {
display: flex;
flex-direction: row-reverse;
width: 450px;
/* width: 500px; */
background-color: lightgreen;
height: 25px;
}
span {
display: flex;
flex-direction: column-reverse;
height: 50px;
/* height: 150px; */
background-color: aqua;
}
<div>with RTL, width expands the div leftward</div>
<p>with flex-direction: row-reverse, to p simulates leftward expansion</p>
<span>with flex-direction: column-reverse, the span simulates upward expansion</span>
Upvotes: 1