A lot of whitespace on the page - css

Question

So i have like that:
http://imgur.com/a/IfHym
Position i did with
position:absolute
and thats what i got
Tried to change but than all images crashing
In html i did like this :
<div class="gallery">
<article class = 'container1'>
<figure class = 'cool'>
<a href="http://www.eminem.com/" class="phorosRef">
<img src="Photos/ Infinite_(1996),_by_Eminem.png"alt="" width="300px" height="300px" class="photos"></a>
</figure>
<figure class="cool">
<a href="http://www.eminem.com/" class="phorosRef">
<img src="Photos/Eminem_-_The_Slim_Shady_LP_CD_cover.jpg" width="300px" height="300px" alt="" class="photos"></a>
</figure>
<figure class="cool">
<a href="http://www.eminem.com/" class="phorosRef">
<img src="Photos/eminem-marshall-mathers.jpg" height="300px" width="300px" alt="" class="photos"></a>
</figure>
<figure class = 'cool'>
<a href="http://www.eminem.com/" class="phorosRef">
<img src="Photos/ Eminem_-_the_eminem_show.jpg" alt="" width="300px" height="300px" class="photos"></a>
</figure>
<article class = 'container2'></article>
<figure class="cool2">
<a href="http://www.eminem.com/" class="phorosRef">
<img src="Photos/скачанные файлы.jpeg" width="300px" height="300px" alt="" class="photos"></a>
</figure>
<figure class="cool2">
<a href="http://www.eminem.com/" class="phorosRef">
<img src="Photos/20090506133342!Relapse_cover.jpg" width="300px" height="300px" alt="" class="photos"></a>
</figure><br/>
<figure class="cool2">
<a href="http://www.eminem.com/" class="phorosRef">
<img src="Photos/71HH7D7Z66L._SL1500_.jpg" width="300px" height="300px" alt="" class="photos"></a>
</figure><br/>
<figure class = 'cool2'>
<a href="http://www.eminem.com/" class="phorosRef">
<img src="Photos/The_Marshall_Mathers_LP_2.png" alt="" class="photos"></a>
</figure>
</article>
</div>
May you give me some advices about it?
Also i can show my css code
See you

Answer 1

Elements with position: absolute will not collide with other elements, meaning that they will just stack on top of each other. I'm guessing the second image in your link is what you want to achieve. In that case I suggest two sections, filled with images.
<div class="section left">
<img/>...
</div>
<div class="section right">
<img/>...
</div>
Then apply `position: absolute' to those sections, and give them a width.
.section {
position: absolute;
width: 250px;
top: 0px;
}
.section.left {
left: 0px;
}
.section.right{
right: 0px;
}
This will create two columns on your page, fill them with images and stick them to the left and right side respectively.