Add width to left side of div?

Question

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.

Answer 1

Here are some possible options:

• Adjust the CSS direction property to make the writing mode RTL.
• Use flex layout with flex-direction: row-reverse for the width problem.
• Use flex layout with 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>