Thursday, 15 August 2013

Positioning a div within a div


 Qusetion

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.



Answer

position: absolute; and position: relative; is what's required
html
<div style="display:table">
  <div style="display:table-row">
    <div class="cell" style="display:table-cell">
      <div id="innerDiv"></div>
    </div>
  </div>
</div>
CSS
.cell {
    position: relative;
}
#innerDiv {
    position: absolute;
    top: 0;
    left: 0;
}
 
 
 

0 comments:

Post a Comment