formatting web gallery - html

Question

i am using the following code to create a small web gallery. right now the thumbnails are placed vertically, and id like them to run horizontally below the main image. does anyone have any suggestions for how to do so?
<div id="content">
<script type="text/javascript">
function myshowImages(id) {
/**$(".bigPic").hide();
$("#pic-"+id).show();*/
$('.bigPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
</script>
<script>
$(document).ready(function () {
$('.email-sign-up').css({'marginBottom':'0px'});
})
</script>
<div class="product">
<div class="galerie">
<div class="bigPics">
<a href="insert" target="_blank">
<img src="insert" title="" alt="" id="pic-0" width="450" height="450" class="bigPic" name="bigPic" />
</a>
<a href="insert" target="_blank">
<img src="insert" title="" alt="" id="pic-1" width="450" height="450" class="bigPic" name="bigPic" style="display:none;" />
</a>
</div>
<div class="thumbnails">
<div class="mini-thumb">
<a href="javascript:myshowImages(0)" >
<img src="insert" title="" alt="" />
</a>
</div>
<div class="mini-thumb">
<a href="javascript:myshowImages(1)" >
<img src="insert" title="" alt="" />
</a>
</div>

Answer 1

The div elements wrapping your thumbs have a default CSS style of display: block, which causes an element to take up 100% of the horizontal space available to it. You could change this with the following rule:
.mini-thumb {
display: inline-block;
}
display property
DEMO
As a side note, well-indented markup can help you identify problems such as missing closing </div> tags, which may contribute to formatting issues.