Why can't I move this div and its content up? - css

Question

I am doing a practice because I recently started programming and I have come to areal block in my road, I am not kidding when I said I have been stuck in this part since morning, first with some troublesome images and now this.
Basically I need to move a div that has imgs and some text up so it stays just beneath the "Logo" but it won't budge! I tried to a lot of this but alas to no avail, I even checked it out on firebug and it appears as if the div containing the logo extends beyond what it should but I am positive I didn't mess it up like that.
Also I cannot use ,styles in html or % for this.
<div id="header">
<img src="imgs/logo.png" id="logo" />
<img id="donate" />
<div id="divMenu">
<ul id="menu">
<li>Home</li>
<li> About </li>
<li> Our Programs </li>
<li> Gallery </li>
<li> Contact </li>
<li> Blog </li>
</ul>
</div>
</div>
<div id="bodyLogo">
<img src="imgs/bg-featured.jpg"alt="" />
</div>
<div id="slogan">
<p>As The Saying Goes.. </p>
<p>You Don’t Know What You’ve Got </p>
<p> ‘Till It’s Gone.</p>
<h2>Plant A Tree.</h2>
<h2> Grow A Tree.</h2>
<h2><span id="tituloSpan">Save The Future.</span></h2>
</div>
Here is where it makes a invisible jump I cannot bridge!
<div id="divPictures" class="opacity">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT"</p>
<div id="flecha">
<img src="">
</div>
</div>
<div class="right" >
<img src="imgs/what-we-do.jpg" alt="">
<p>"TEXT."</p>
<div id="flecha">
<img src="">
</div>
</div>
</div>
And the CSS:
body{
width: 956px;
font-family: 'Rokkitt', serif;
background: url("../imgs/bg-header.jpg");
background-repeat:repeat-x;
text-decoration: none;
margin: 0 auto;
}
#bodyLogo{
height: 396px;
position: relative;
margin: 18px 0 0 0;
}
#divPictures{
position: absolute;
width: 956px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 700px 0 ;
vertical-align: top;
}
.left{
width: 478px;
float:left;
font-family: 'Quattrocento Sans', sans-serif;
}
.right{
width: 478px;
float:right;
font-family: 'Quattrocento Sans', sans-serif;
}
.left img, .right img{
margin: 0 0 0 10px;
}
#flecha{
background: url("../imgs/arrow-gray.png");
background-repeat: repeat-x;
width: 460px;
}
Thanks A LOT in advance.
Best Wishes.

Answer 1

You have a fixed height on your #bodyLogo which would make it extend past it's size. I don't know how large you have your images, but everything should snap right below it if you remove that height.