0

Here in my screen, I have given the margin-left and margin-right equal right now. But I need is, margin-right should be 'x' and margin-left should be 'x/1.5'. While the margin-right is auto as per the window size.

amit
  • 353
  • 1
  • 3
  • 19
  • Share your code and what you have tried so far. So that others can help you. – Nik May 08 '19 at 06:51
  • Hi and welcome to SO :) Can you provide a minimal example of what you are trying as fiddle or codepen link, that will help the community in answering – semuzaboi May 08 '19 at 06:51
  • You might be able to do something with relative positioning. Otherwise, JavaScript. – Mr Lister May 08 '19 at 06:51

4 Answers4

3

You can use the function calc() to do that.

.myDiv {
    margin-right: 1em;
    margin-left: calc(1em / 1.5);
}

Check this if you want more info about that function. It's pretty interesting tho https://developer.mozilla.org/en-US/docs/Web/CSS/calc

M4FI4S
  • 166
  • 7
  • @amit `calc()` function does not support `auto`. Check this post https://stackoverflow.com/questions/21275565/using-calc-with-auto-margin – M4FI4S May 08 '19 at 11:51
1

I suspect you are trying to center the element then to offset it slightly from the center by having the auto configuration but without equal values.

Here is an idea where you can rely on flexbox to achieve this behavior:

.wrapper {
  margin:20px;
}

.box {
  width:80px;
  height:50px;
  background:blue;
  margin:auto;
}
.flex {
  display:flex;
}
.flex:before,
.flex:after{
  content:"";
}
.flex:after {
  flex-grow:1.5; /*will grow more than the before by 1.5 */ 
}
.flex:before {
  flex-grow:1;
}
<div class="wrapper">
  <div class="box"></div>
</div>

<div class="wrapper flex">
  <div class="box"></div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

you need to define width with for right in numbers, that can be find with js/jquery then use this:

Just updated code, please check now

Margin Issue

Hope this will help.

Amarjit Singh
  • 1,152
  • 7
  • 12
0

You can do this using css custom-properties and media-queries:

.container {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: lime;
}
.box-with-margin {
  --margin-value: 2rem;
  margin-left: var(--margin-value);
  margin-right: calc(3 * var(--margin-value));
}

@media (max-width: 1600px) {
  .box-with-margin {
    --margin-value: 1rem;
  }
}

@media (max-width: 700px) {
  .box-with-margin {
    --margin-value: 0.5rem;
  }
}
<div class="container">
  <div class="box"></div>
  <div class="box box-with-margin"></div>
  <div class="box"></div>
</div>
fen1x
  • 5,616
  • 6
  • 28
  • 39