CODEWITHSUNDEEP
htmlcss
Seth
Seth

Reputation: 121

How do I insert a form into a div in HTML/CSS properly?

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;
}

Upvotes: 0

Views: 2618

Answers (1)

Nick Rolando
Nick Rolando

Reputation: 26167

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

Upvotes: 1

Related Questions