Positioning a div within a div

Question

I have the following div table:

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell">
      <div id="innerDiv"></div>
    </div>
  </div>
</div>

Inside the cell is a div with the id "innerDiv". Is there a way to position this div such that its top/left corner is located anywhere within the cell? I tried all the css position values but none work.

You can't use `positioning` inside a `table cell` as freely as you can inside a `relative`ly positioned `block` element. — Itay, Aug 16 '13 at 06:17
Please share a JSFiddle. I think it should become a standard on SO — Ali Gajani, Aug 16 '13 at 06:17

score 1 · Accepted Answer · edited May 23 '17 at 12:11

We're not supposed to give the same element table-cell display and relative position. It's not supported equally between modern browsers (try this in FF).

If it's the only way you can do things on your specific case, add a relatively positioned wrapper div inside the cell.

For example:

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell">
      <div class="relativeDiv">
          <div id="innerDiv"></div>
      </div>
    </div>
  </div>
</div>

.relativeDiv
{
    height: 100%;
    width: 100%;
    /* You may need some negative margin 
       if there's a padding on the table cell */
    position: relative;
}

#innerDiv
{
    position: absolute;
    /* You're now free to set the top and left attributes freely */
}

For further reading:

score 0 · Answer 2 · answered Aug 16 '13 at 06:27

0

You should use position property in outer div explicitly（such as: relative,fiexd,absolute)

div {
  position: relative;
};

#innerDiv {
   position: absolute;
   left: 10px;
}

answered Aug 16 '13 at 06:27

user2666750

582
1
7
11

Positioning a div within a div

2 Answers2