constructing a gallery with thumbnails issues - html

Question

This is what I'm trying to achieve. My problems are of course at generating the thumbnails right. What I tried is using a shadow rather than a border for the grey outline and I intended to put a margin for the thumbnails so they get to have the common outline you can probably see. I'm pretty much out of ideas and approaches to getting this to work so I would like to hear your suggestions. Thing is I want this to be responsive so I gave percent dimensions to the thumbnails and all. Here is the code:
<div class="gallery preview">
<div class="main frame">
<img src="images/pic-1.png" class="img-responsive" alt="a">
</div>
<div class="navigation">
<div class="control left">
<i class="fa fa-fw fa-chevron-left"></i>
</div>
<div class="thumb clearfix">
<div class="frame">
<img src="images/pic-1-thumb.png" class="img-responsive" alt="a">
</div>
<div class="frame">
<img src="images/pic-2-thumb.png" class="img-responsive" alt="a">
</div>
<div class="frame">
<img src="images/pic-3-thumb.png" class="img-responsive" alt="a">
</div>
<div class="frame">
<img src="images/pic-1-thumb.png" class="img-responsive" alt="a">
</div>
<div class="frame">
<img src="images/pic-2-thumb.png" class="img-responsive" alt="a">
</div>
<div class="frame">
<img src="images/pic-3-thumb.png" class="img-responsive" alt="a">
</div>
<div class="frame">
<img src="images/pic-1-thumb.png" class="img-responsive" alt="a">
</div>
</div>
<div class="control right">
<i class="fa fa-fw fa-chevron-right"></i>
</div>
</div>
</div>
and the css:
.preview.gallery {
margin: 10px 0;
}
.preview.gallery .frame {
border-radius: 3px;
}
.preview.gallery .thumb {
max-width: 508px;
float: left;
margin: 1px;
}
.preview.gallery .navigation .control {
width: 22px;
display: block;
}
.preview.gallery .navigation .control.left {
float: left;
}
.preview.gallery .navigation .control.right {
float: right;
}
.preview.gallery .thumb .frame {
width: 14.28571428571429%;
display: block;
float: left;
}
.preview.gallery .thumb .frame img {
width: 100%;
}
.preview.gallery .frame {
box-shadow: 0 0 1px 0 rgba(0,0,0,0.5);
}
.preview.gallery .main.frame {
border: 8px solid #fff;
}
.preview.gallery .navigation .control {
background: #fff;
line-height: 74px;
box-shadow: 0 0 1px 0 rgba(0,0,0,0.5);
margin-top: 1px;
border-radius: 3px;
}

Answer 1

1. Set the position of .navigation to relative (so that we can place the two controls on the side of this fluid div):
.navigation {
position:relative;
}
2. Add to .preview.gallery .navigation .control this css code:
.preview.gallery .navigation .control {
position:absolute;
top:0;
}
3. and to the left navigation div:
.preview.gallery .navigation .control.left {
left:0;
}
4. and to the right navigation div:
.preview.gallery .navigation .control.right {
right:0;
}
5. Finally change the margin on .preview.gallery .thumb to:
.preview.gallery .thumb {
margin:0 22px; /* or whatever width you have on the controls */
}
DEMO.
Note
You mentioned wanting some space between the thumbnail and the border. In order for that to work with the percentege values you assigned them, you will want to add this code too:
.preview.gallery .frame {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}