I have a selection of divs that are displaying properly except that they are under one another. I'm assuming this is because they are block elements. So, I try to switch them to inline but they and their content don't display properly.

here is my index: I'm sorry my formatting is terrible

<div class="midline">

<img src="images/latest.gif" id="latest"><img src="images/kam.jpg" class="smallimages">
<img src="images/rvvally.jpg" class="smallimages"><img src="images/blog.jpg" class="smallimages">
<img src="images/saladfingers.jpg" class="smallimages"><img src="images/poolbuilders01.jpg" class="smallimages">
<img src="images/lionsyell.jpg" class="smallimages"><img src="images/poolbuilders02.jpg" class="smallimages">

<div class="img"><img src="images/evato.jpg" alt="Evato Site Design" width="141" height="96" />
<div class="desc">web design and development.</div></div><div class="img">
<img src="images/tevaclean.jpg" alt="Teva Clean Flyer Design" width="141" height="96" />
<div class="desc">Graphic design and print.</div></div><div class="img">
<img src="images/vehl.jpg" alt="Character Illustration" width="141" height="96" /><div class="desc">
Illustration and character design.</div></div><div class="img">
<img src="images/branding.jpg" alt="Branding Package Sample" width="141" height="96" /><div class="desc">
Branding and documentation</div></div><div class="img">
<img src="images/other.jpg" alt="Texture Map Sample" width="141" height="96" /><div class="desc">Other.</div></div>

</div>
Here is my external CSS:

div.midline {background-color: #181717;
z-index:2;
padding-top:15px;
padding-bottom:15px;
padding-right:0px;
padding-left:0px;}

div.img {margin: 2px;
border: 7px solid #232222;
-moz-border-radius: 15px;
border-radius: 15px;
background-color:#1b1a1a;
width: 170px;
margin-top:15px;
margin-bottom:0px;
margin-right:15px;
margin-left:15px;
z-index:3;}

div.img img {display: inline;
margin-top:10px;
margin-bottom:10px;
margin-right:15px;
margin-left:15px;
border: 0px;
z-index:4;}

div.desc {text-align: left;
width: 141px;
margin-top:0px;
margin-bottom:10px;
margin-right:15px;
margin-left:15px;
z-index:4;}
When like this, this is how the page displays:

If I add {display:inline;} to my div.img this is how it displays

I'm also having issues with the contents of a div inheriting an opacity that I only want to apply to the background. But that one I haven't tried too hard to figure out on my own honestly ;P. Anyway, I'm new to developing so I'm probably missing something silly. It's driving me bananas though so... thanks if anyone can give me a nudge.