Positioning based on the parent element and moving little from left side

Question

.parent-div {
  box-sizing: border-box;
  min-width: 0px;
  padding: 1rem;
  min-height: 1px;
  margin: 0;
  border: solid 1px;
}

.child-div-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  min-height: 400px;
  display: flex;
  border: solid 1px;
}

.child-div-one-of-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  flex: 1 0 calc(18% - 60px);
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child-div-one-of-one-of-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 395px; // this is dynamically calculated it can become any value bw 380 and 400px
  position: relative;
  display: -ms-flexbox;
  display: flex;
}

.button-new-one {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 120px;
  border-radius: 2px;
  cursor: pointer;
  padding: 6px 16px;
  position: absolute;
  bottom: 0;
}

.child-div-one-of-two {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  -ms-flex: 1 0 82%;
  flex: 1 0 82%;
  display: -ms-flexbox;
  display: flex;
  border: solid 1px;
}

.child-div-two {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  display: -ms-flexbox;
  display: flex;
}

.child-div-two-of-one {
  box-sizing: border-box;
  min-width: 0px;
  margin: 0 auto;
}

<div class='parent-div'>
  <div class='child-div-one'>
    <div class='child-div-one-of-one'>
      <div class='child-div-one-of-one-of-one'>
        <button class='button-new-one'>New One</button>
      </div>
    </div>
    <div class='child-div-one-of-two'></div>
  </div>
  <div class='child-div-two'>
    <div class='child-div-two-of-one'>
      <button class='button-less'>Less</button>
      <button class='button-more'>More</button>
    </div>
  </div>
</div>

In the above snippet even i have given margin: 0 auto, but its positioning on the centre of the div, but i want it move exactly centre of the child-div-one-of-two, Should i add margin-left, or i want to centre the button instead of 100% it should be 82%

So basically the less and more buttons should be exactly centre of the above div. Also if the above div gets more content the less and more buttons should move down, how can i achieve these two things

Any help is appreciated

Just to make sure I understand - the goal is to place the "Less" and "More" buttons in the center of the `.child-div-one-of-two` div? — Dimitar Spassov, Nov 24 '20 at 08:12
yep and right now its a div of 100% and when we give margin: 0 auto it works, but it should be centre of 82% it should move little more to the right — dev, Nov 24 '20 at 08:47
If 82% is a known value, just add `padding-left: 9%` to `.child-div-two-of-one` — pavel, Nov 24 '20 at 09:07

score 0 · Answer 1 · answered Nov 24 '20 at 09:09

If 82% is a known value, just add padding-left: 9% to .child-div-two-of-one.

.parent-div {
  box-sizing: border-box;
  min-width: 0px;
  padding: 1rem;
  min-height: 1px;
  margin: 0;
  border: solid 1px;
}

.child-div-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  min-height: 400px;
  display: flex;
  border: solid 1px;
}

.child-div-one-of-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  flex: 1 0 calc(18% - 60px);
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child-div-one-of-one-of-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 395px; // this is dynamically calculated it can become any value bw 380 and 400px
  position: relative;
  display: -ms-flexbox;
  display: flex;
}

.button-new-one {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 120px;
  border-radius: 2px;
  cursor: pointer;
  padding: 6px 16px;
  position: absolute;
  bottom: 0;
}

.child-div-one-of-two {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  -ms-flex: 1 0 82%;
  flex: 1 0 82%;
  display: -ms-flexbox;
  display: flex;
  border: solid 1px;
}

.child-div-two {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  display: -ms-flexbox;
  display: flex;
}

.child-div-two-of-one {
  box-sizing: border-box;
  min-width: 0px;
  margin: 0 auto;
  padding-left: 9%;
}

<div class='parent-div'>
  <div class='child-div-one'>
    <div class='child-div-one-of-one'>
      <div class='child-div-one-of-one-of-one'>
        <button class='button-new-one'>New One</button>
      </div>
    </div>
    <div class='child-div-one-of-two'></div>
  </div>
  <div class='child-div-two'>
    <div class='child-div-two-of-one'>
      <button class='button-less'>Less</button>
      <button class='button-more'>More</button>
    </div>
  </div>
</div>

Okay, isn't should be 18% rather than 9%, when i given 18% its more centre — dev, Nov 24 '20 at 09:12
Whats the better way to move when the content height increases ? as mentioned in the question, how can i move the buttons downwards when the just above div height increases — dev, Nov 24 '20 at 09:58
Hi @ pavel I had one doubt regarding on this question https://stackoverflow.com/questions/70063149/event-timeline-with-animation If you can help me on this it will be really helpful, many thanks — dev, Nov 23 '21 at 11:00

Positioning based on the parent element and moving little from left side

1 Answers1