Want to have pictures next to each other in my gallery (Html) - html

Question

Basically I have put a gallery into the website that I am making, and it works well. But. The pictures just scroll down the left side of the screen. I would like half of the pictures to be to the right of the other pictures... Here is a screenshot of my website (With Hi-tech red boxes drawn in paint to show where I would like half of the pictures to go)
http://tinypic.com/view.php?pic=hx3fbb&s=8#.U2JPKYFdX-k
Here is my code....(html)
<div class="img">
<a target="_blank" href="Gallery/Ss1.jpg">
<img src="Gallery/Ss1.jpg" alt="Screenshot1" width="500" height="400">
</a>
<div class="desc">Death vs Colossus</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss2.jpg">
<img src="Gallery/Ss2.jpg" alt="Screenshot2" width="500" height="400">
</a>
<div class="desc">Death's forge</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss3.jpg">
<img src="Gallery/Ss3.jpg" alt="Screenshot3" width="500" height="400">
</a>
<div class="desc">Death vs Horseman</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss4.jpg">
<img src="Gallery/Ss4.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Horse Jump</div>
</div>
<p></p>
<div class="img">
<a target="_blank" href="Gallery/fa1.jpg">
<img src="Gallery/fa1.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Fan Art #1</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa2.jpg">
<img src="Gallery/fa2.jpg" alt="FanArt2" width="500" height="400">
</a>
<div class="desc">Fan Art #2</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa3.jpg">
<img src="Gallery/fa3.jpg" alt="FanArt3" width="500" height="400">
</a>
<div class="desc">Fan Art #3</div>
</div>
<div class="img1">
<a target="_blank" href="Gallery/fa4.jpg">
<img src="Gallery/fa4.jpg" alt="FanArt4" width="500" height="400">
</a>
<div class="desc">Fan Art #4</div>
</div>
and here is my CSS code;
div.img
{
margin:5px;
padding: 5px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
So again, I would basically like the Fan art pictures to appear to the right of the Screenshot pictures. I tried making a new div class for the fan art and changing the float to 'right' but that didn't work.
Thankyou in advance for your time and input :)

Answer 1

There are a couple different methods you could use for this. You could use floats or display: inline-block.
http://jsfiddle.net/Davidicus/p4Qkh/
Here is a simple float example.
I have a pen where i am using "inline-block" to float elements. Click on the little eye icon in the css panel to see the compiled css.
http://codepen.io/davidicus/pen/vxIra