Inside div will not snap to top of container div - css

Question

Before you read further, I am utilizing the OneByOne Jquery Slider plugin, the plugin content is what I am attempting to snap to the top of its container div. To read more about OneByOne, here is a link: http://codecanyon.net/item/jquery-onebyone-slider-plugin/684613
I am attempting to snap an inside div to the top of its container div, here is my (what I think is anyway), the related CSS:
#banner{
position: absolute;
}
.oneByOne1{
margin-right: auto;
margin-left: auto;
width: 960px;
height: 420px;
position: relative;
overflow: hidden;
}
#banner .oneByOne_item{
position: absolute;
width: 960px;
height: 420px;
overflow: hidden;
display: none;
}
The div I am attempting to snap to the top is the "banner" div, and the container div is "content", but with the OneByOne plugin, it's recognized as the oneByOne div block coded above, here is my relevant HTML:
<div id="content">
<div id="banner">
<div class="oneByOne_item">
<img src="img/storefront.jpg" class="item_1_1" />
</div>
<div class="oneByOne_item">
<img src="img/livemusic.jpg" class="item_1_2" />
</div>
<div class="oneByOne_item">
<img src="img/brokerecord.jpg" class="item_1_3" />
</div>
</div>
</div>
Here is a link to my current site: http://raider.grcc.edu/~ryanduffing/recordstore/

Answer 1

<div class="search_line"> has position:relative and top: -100px. The image inside has a height of 61px, so the div around it does too.
Because you have it positioned relatively, it is still taking up space in the DOM where it naturally would appear, but your top value is "pulling" it up to where it appears visually. Because it's still taking up space in the DOM, it's pushing your #content down the 61px.
I can't see a good reason to leave it how you've done it, so if you can alter it without breaking anything else, I'd recommend changing it to
.main_header .search_line {
position: absolute;
top: 39px;
right: 0;
}