Robin Robin - 1 year ago 92
CSS Question

CSS Divs Jumping when Border Added

I'm can't understand why the boxes shift when I hover over the first one (top-left). I've set box-sizing to border-box so the added border on hover shouldn't effect things, and it only happens on the frst box. Please help!

JS fiddle here.

* {
box-sizing: border-box !important;

font-family: Arial, Helvetica, sans-serif;

#gameArea {
width: 700px;
margin: 0 auto;

text-align: center;

.card {
float: left;
margin: 10px;
padding: 20px;
background: lightblue;
text-align: center;
border-radius: 5px;
box-shadow: 10px 10px 10px #ccc;

display: none;

.card:hover {
cursor: pointer;
border: 3px solid blue;

.card p {
font-size: 48px;
color: blue;

img {
width: 250px;
height: 188px;
vertical-align: middle;

.helper {
display: inline-block;
height: 100%;
vertical-align: middle;

Answer Source

That is because border width adds to the element's width, thus when an additional width is added to an element on hover, it will alter the normal layout flow.

You can easily fix it by adding a 3px transparent border in the static state:

.card { border: 3px solid transparent; }

jsFiddle fork:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download