DIV's and Floats...

[Jim R]

Here is the site:

http://hoosierhoopsreport.com

 

If you scroll down, just above the footer on the right hand side are my image galleries. There is a gap, due to one of the titles being three lines instead of two. It only affects the left column. The DIVs are set to float left, and I want to get rid of that gap without changing the width or font size.

 

I've tried bigger margins, as well as padding.

 

Here is the CSS and code:

 

<style type="text/css">
.menu-item {
float: left;
position: relative;
width: 100px;
font-weight: bold;
line-height: 15px;
font-size: 10px;
padding: 5px;
display: inline-block;
}

.menu-item a {
font-weight: bold;
color: #000;
text-decoration: none;	
}
.menu-item a:hover {
text-decoration: underline;
}
</style>
<div class="menu-item">
<a href="{=gallery.link}" title="{=gallery.title}"><img src="{=image.url}"{=image.output_width_tag}{=image.output_height_tag} alt="{=gallery.title}" />{=gallery.title}</a>
</div>