Question

I have been using Twitter Bootstrap 2.1 in my latest design. For some reason when I add any div elements to the page all of my content/main body gets pushed really far down and extra space is added all over the page, here is a live example and a picture provided as well:
http://www.japaneselanguagefriend.com/application/home.php

In my CSS in the bootstrap.min.css file I have

body{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
    position:relative;
}

and for the div

#apDiv1 {
position:relative;
left:439px;
top:669px;
width:300px;
height:670px;
z-index:1;

}

I am trying to get a div to display directly over my main content as shown in the picture, but the spacing and more seems to all get messed up somehow. Any advice or assistance on the problem would be greatly appreciated. Thank you!

UPDATE: So I need to figure out the best way to position my div without affecting my whole layout’s spacing. (Thank you Mr.Alien for recommending to adjust the top:size; in my divs style)

I am looking for the best way to position it right in with the orange box in the example picture

Answer 1

You are using top:669px; so cut that down to somewhat top:30px;