Question 415256 in Html Question posted in
Some basic documentation can be found here.

Html – Absolute positioned image ignoring left and right

I’m trying to place an image in a relative container (which has a width and height) 20px from the top, left and right like this:

<div style="position: relative; height: 100px; width: 200px">
  <img src="x" style="position: absolute; top: 20px; left: 20px; right: 20px;">
</div>

My image however, as it doesn’t have a width set is just defaulting to its own width and overflowing (the parent have overflow hidden).

Any ideas how to make this work? I may have some other CSS which is causing the issue but I tried to just give a clean example.

Tags:

2

Answers


  1. 0

    Do it like that, Its working.

    .parent {
    position: relative;
    background-color:#ddd;
    width:200px;           
    height:100px; 
}

#image {
    position: absolute;
    top:20px;
    left:20px;
    right: 20px;
}
    <div class="parent" >
    <img id="image" src="x">
</div>
    Login or Signup to reply.
  2. 0

    Try it like this. It will work

    <div style="position: relative; height: 100px; width: 200px; overflow: hidden;">
      <img src="x" style="position: absolute; top: 20px; left: 20px; right: 20px; width: calc(100% - 40px);">
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search