divs move when hovering over other divs - css

Question

I have a few work thumbnail divs in a container When I hover over one specific one, it shifts the ones after it along the next row. How can I resolve this?
HTML:
<div class="blog-container">
<h1>PRINT</h1>
<div class="work_thumbs">
<li class="print">
<div><img src="../Images/Tree Top News/Thumbs/TTN2.jpg" alt="Tree Top" border="0" class="thumb">TREE TOP NEWS</div>
</li>
<li class="print">
<div><img src="../Images/Harrow Council/Thumbs/Harrow Logo.jpg" alt="Harrow Council" border="0" class="thumb">HARROW COUNCIL</div>
</li>
<li class="print">
<div><img src="../Images/Regent/Thumbs/Regent logo.jpg" alt="Regent Care" border="0" class="thumb">REGENT CARE SERVICES</div>
</li>
<li class="print">
<div><img src="../Images/NLCS/Thumbs/NLCS logo.jpg" alt="NLCS" border="0" class="thumb">NLCS</div>
</li>
<li class="print">
<div><img src="../Images/Aish/Thumbs/AHC.jpg" alt="Aish" border="0" class="thumb"> AISH</div>
</li>
<li class="print">
<div><img src="../Images/FJL/Thumbs/FJL.jpg" alt="chicago graphic design" border="0" class="thumb">FJL</div>
</li>
<li class="print">
<div><img src="../Images/Tree Top News/Thumbs/TTN.png" alt="Canons high school" border="0" class="thumb">CANONS HIGH SCHOOL</div>
</li>
</div>
</div>
CSS:
.blog-container {
height: 100%;
width: 100%;
margin-top: 37px;
background-color:
}
.work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
}
.work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: "geogtq md";
color: #FFF;
overflow: hidden;
}
.work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 50px;
font-family: "geogtq md";
color: #00BDE5;
height: 200px;
border: 1px solid #02BDE5;
overflow: hidden;
}
.work_thumbs li .type {
color: #01BDE6;
}
.work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #a2a2a2;
text-decoration: none;
margin-bottom: -1px;
color: #007789;
font-family: "geogtq md";
}
.work_thumbs li .thumb {
margin-bottom: 15px;
display:block
}

Answer 1

element:hover{url('pathToImg.png'); position:relative; z-index:1;}
Make z-index:1 a higher index to suit your needs, and include a height and width as well.

Answer 2

You are changing the dimensions of your divs upon hover, by adding the negative margin-bottom. this causes your floating divs to 'hook' upon hover, in stead of starting at the left.
Here you can see it in action: http://jsfiddle.net/P8xEN/