Question

I’m having problems with this:

Jsfiddle.net

As you can seen, when you hover over those divs, a border is added but it changes the dimensions and in some cases, the position of other divs.

In some sense, the amount of text is responsible for this (that is, if I place more or less the same number of characters in each div, everything works as expected), but I’d like to have some flexibility with respect to the content of each div.

How can I solve this?

Regards

Answer 1

The solution is to give it a white border initially and then change the border color. The W3 box model includes the border in the calculated width of DOM nodes, so when you add a border, it has to recalculate the width and adjust content.

http://jsfiddle.net/AlienWebguy/ePWNg/5/

An alternative solution would be to remove the width and height of the border as you add it, like so:

#my_div {
    width:100px;
    height:100px;
}

#my_div:hover {
    width:98px; /* Minus 1px for top, 1px for bottom border */
    height:98px; /* Minus 1px for left, 1px for right border */
    border:1px solid #000;
}