Adding border div pushing other divs out of box

I am adding a div border on the mouseover of the div, but its pushing other divs o开发者_如何学运维ut of the box.

I have fixed height and width and have 4 divs for row. finally there are two rows with 8 divs and with fixed height. When i mouseover any div , it pushes all the divs below it outside the main box.

I tried to increase the height of the main box , but still it pushes out. can anyone help me with this issue.

Add transparent border to all div elements. Then in your hover event modify border color/type. That will make divs stay in their position.

Border gets added to the width, so it is making the moused-over element get larger.. this pushes the other divs around..

It is normal behaviour..

You could use outline instead of border but it IE has limited support (IE8 and above) ..

Border is added to the width of the element. You can try having a border by default with transparent color (or a color that fits with your design), and on mouseover only change the color of the border. Of course you have to subtract the border-width from your fixed height and width.

Set the boxes inside the main div to have an absolute position with top/left values.

box1{
    position: absolute;
    left: 5px;
    top: 5px;
}

box2{
    position: absolute;
    left: 5px;
    top: 55px;
}

. . .