Moving div around and its content

Question 1

Something like this? Quick example, you can obviously add in extra CSS, or float both left and pad/margin etc...

#divPictures{
width: 100%;
background:  url("../imgs/bg-body.jpg");
}

.left{
width: 45%;
float:left;
}

.right{
width: 45%;
float:right;
}

.left img, .right img{
margin: 0 0 0 10px;
}

HTML:

<div id="divPictures">

<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
</div>

<div class="right">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>

</div>

Question 2

Make new divs for images and use css atribute display: inline-block to tell interpreter that you want your divs in a line.

<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
div#pic
{
    display: inline-block;
    width: 200px;
    background:  url("../imgs/bg-body.jpg");
    margin: 5px 0 0 -5px;
}
div#pic img
{
    margin: 0 0 0 10px;
}
</style>
</head>
<!-- HTML -->
<body>
<div id="divPictures">
    <div id="pic">
        <img src="imgs/help-out.jpg" alt="">
        <p>"TEXT HERE"</p>
    </div>
    <div id="pic">
        <img src="imgs/what-we-do.jpg" alt="">
        <p>"AND HERE"</p>
    </div>
</div>  
</body>
</html>

Question 3

This is the simplest way... When i get stuck I delete it and start over. I think you would have benefitted from starting over...

CSS

<style>
.caption{
    text-align: center;
}
li{
    background: #ccd2cd;
    float: left;
    margin:5px;
    list-style: none;
    padding:5px;
}
</style>

HTML

<ul>
    <li>
        <img src="http://omarhabash.com/img/feature1.jpg" alt="">
        <div class="caption">caption2</div>
    </li>

    <li>
        <img src="http://omarhabash.com/img/feature1.jpg" alt="">
        <div class="caption">caption2</div>
    </li>
</ul>

if you dont want to use (li) list then just replace those with div classes and rename the style also to the same.

the way i have it here is a good start to a grid if thats what you are aiming for.

http://jsfiddle.net/Mz6aF/