Question

I can’t get it right. This is what I have.

2 background image divs (for content) and a footer. I’m trying to anchor the form to the top of the div_11 but it goes to the bottom and hides portions of it.

<div id="index-11_">
  <img src="xxx/ttt.jpg" alt="" width="1012" height="295" align="top" id="index_11" />
  <form>
    <div class="form">FORM CODE</div>
  </form>
</div>

<div id="index-12_">
  <img id="xxx/ccc.png" width="100" height="592" alt="" />
</div>

Here is the CSS:

#index-11_ {
  position:absolute;
  left:88px;
  top:158px;
  width:1012px;
  height:295px;   
}

div.box {   
  position:relative;
  background:#222222;
  width: 600px;
  margin-left:auto;
  margin-right:auto;
  border:1px solid #262626;
}

#index-12_ {
  position:absolute;
  left:1100px;
  top:158px;
  width:100px;
  height:592px;
}

Answer 1

The form goes to the bottom because you have it placed after your first image. It seems like you want the image elements to be background images of the div instead of having them be actual elements in the html flow. You can make them so; add this to #index-11_ css:

background: url(xxx/ttt.jpg) no-repeat;

replacing your first image element.

http://reference.sitepoint.com/css/background