Question 190302 in CSS Question posted in
Some basic documentation can be found here.

Css – How to align box at half bottom and half out of container

I am solving a challenge and i am unable to fix a box at bottom header where half box will be inside header and the other half will be out of header with fully responsive. I tried it do with positions and bottom but when i change responsiveness more than half portion of box goes inside header or sometime more than half portion goes outside of header. i want that box size always fix at half inside bottom.

i want to align box like this:

click here to see image

Tags:

3

Answers


  1. 0

    I think this will work:

    With position: absolute:

    .parent {
  position: relative;
}

.box {
  position: absolute;
  bottom: -50%;
}

    With transform:

    .box {
  transform: translateY(-50%)
}

    Edit:

    .parent {
  position: relative;
}
.box {
  position: absolute;
  bottom: -100%;
  transform: translateY(-50%) // i am not sure if -50% or 50%
}
    Login or Signup to reply.
  2. 0
    1. Use position: relative on the parent element
    2. Apply position: absolute to the child element
    3. Place the child element below the parent element by using top: 100%
    4. offset the child element to 50% of its own height to the top by using transform: translateY(-50%)
    .parent {
  position: relative;
}

.child {
  position: absolute;
  top: 100%;
  transform: translateY(-50%)
}




/* for visualization purpose only */
.parent {
  border: 2px dashed red;
  min-height: 30vh;
}

.child {
  border: 2px solid blue;
  min-height: 15vh;
  width: 40vw;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div class="parent">
  Parent
  <div class=child>Child</div>
</div>
    Login or Signup to reply.
  3. 0

    Please try to add negative margin like -50px this can solve your problem easily. and add same margin bottom to parent too.

    Hope this will solve your problem.

    .parent{
    background-color: tomato;
    padding: 20px;
    text-align: center;
    margin-bottom: 50px;
}
.child{
    background-color: royalblue;
    padding: 15px;
    text-align: center;
    margin-bottom:-50px;
}
    <div class="parent">
  <p>lorem ipsum</p>
  <div class="child">
    <p>lorem ipsum dolor sit.</p>
  </div>
</div>

<p style="border:solid 1px red;">lorem ipsum dolor sit.</p><p>lorem ipsum dolor sit.</p><p>lorem ipsum dolor sit.</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search