When 1 px border is added to div, Div size increases, Dont want to do that.

Question

Hi,

On click I am adding, 1px border to div, so Div size increases by 2px X 2px. I dont want to get div size increased. Is there any simple way to do so?

Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.

Cheers,

EDIT:
Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..

Answer 1

Just decrease the width and height by double of border-width

Answer 2

Try decreasing the margin size when you increase the border

Answer 3

The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug, under the html->layout tab.

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.

Eg:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

Answer 4

set a border on it before you click to be the same color as the background.

Then when you click just change the background color and the width will not change.