Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.


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

share|improve this question

6 Answers

up vote 3 down vote accepted

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.


    width: 15px;
    height: 15px;
    /* padding: 5px; */

div.navitem .selected
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
share|improve this answer
thnx, i had .dragdrop-selected class but it was used by all dragable objects and I had like 3 different size (3 different type) of Dragable object, so I kept padding same in all 3 AND set padding in .dragdrop-selected.. & it worked. :) – Nachiket Jul 15 '10 at 16:40

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.

share|improve this answer

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

share|improve this answer

this is also helpful in this scenario. it allows you to set borders without changing div width

textarea { 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

taken from

share|improve this answer

Another good solution is to use outline instead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.


share|improve this answer

Try decreasing the margin size when you increase the border

share|improve this answer
okay, let me try with Margin – Nachiket Jul 15 '10 at 10:25

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.