Adding border div pushing other divs out of box

Question

Hi ,

I am adding a div border on the mouseover of the div, but its pushing other divs out 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.

Answer 1

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) ..

Answer 2

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;
}

. . .

Answer 3

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.

Answer 4

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