I have set up a gallery page as:

div id image_container
div id image_1 class the box


So here is the css of my gallery page


/*image/BOX
-------------
------------- */

.the_box {
float: left;
height: 251px;
width: 251px;
overflow: hidden;
position: relative;
margin: 0 29px 29px 0;
}

.the_box h2 {
font-size: 10px;
}

.the_box a {
display: block;
position: relative;
}

.the_box a img {
height: 251px;
width: 251px;
position: absolute;
top: 0;
left: 0;
}


#image_container {
width: 811px;
margin: 20px 0px 20px;
padding: 0;
float: left;
list-style: none;
}

ul#image li a {
height: 248px;
width: 248px;
float: left;
}

#image_3,
#image_6,
#image_9,
#image_12,
#image_15,
#image_18,
#image_21,
#image_24,
#image_27,
#image_30 {
margin: 0;
}

Unfortunately, the h2 text is blocked off by each image. How do I get it to fit underneath each image? Any tips would be greatly appreciated!