绝对定位在100％宽度内的相对位置div

Question

I try to absolute positioning couple of img elements inside one .branch_item element who should have position: relative .

Everything works fine when .branch_item has with and height in px , but I need them in % not px (because this element should have 100% of width ). The % unit works only with fixed position, but it can't be in that position.

My code looks like:

<div class="container left">
  <div class="twelve columns">
    <div class="branch_item">
      <div class="csc-row">
        <figure class="csc-image csc-image-first csc-image-last">
          <img src="uploads/pics/bg_01.png" alt="" />
        </figure>
      </div>
      <div class="csc-row">
        <figure class="csc-image csc-image-first csc-image-last">
          <img src="uploads/pics/de.act.png" alt="" />
        </figure>
      </div>
      <div class="csc-row">
        <figure class="csc-image csc-image-first csc-image-last">
          <img src="uploads/pics/lx.act.png" alt="" />
        </figure>
      </div>
      <div class="csc-row csc-row-last">
        <figure class="csc-image csc-image-first csc-image-last">
          <img src="uploads/pics/pl.act.png" alt="" />
        </figure>
      </div>
    </div>
    <div class="twelve columns menu-bar">
    </div>
  </div>
</div>

and here is my css code:

.branch_item {
  background: #ECECED; 
  position: relative;
  top: 50px; 
  left: 0;
  width: 100px;
  height: 100px;
}

.branch_item img {
  position:absolute; 
  top:0px; 
  left:25%; 
  width:50%;
}

When I set in .branch_item element width and height in % unit I have blank page without anything.

Anyone know how to set it?

Answer 1

When you set width and height in percent, it takes the measurements relative to it's parent. Do you have a set height and width on <div class="twelve columns"> ? (not in percentage) If not, .branch_item cannot have percentage height.