How to Prevent Shifting When Changing Border Width

how to prevent shifting when changing border width

While you've already accepted an answer, which works, it seems rather more complicated than it needs to be, having to calculate and adjust margins and such; my own suggestion would be to make the border itself transparent, and use a fake 'border', using box-shadow (which doesn't cause any movement since it's not part of the 'flow' as such):

.o {
    /* no changes here */
}

.o.selected {
    border-color: transparent; /* remove the border's colour */
    box-shadow: 0 0 0 2px blue; /* emulate the border */
}

JS Fiddle demo.

How to prevent adjoining elements from moving when increasing border width?

Pretty easy to do actually. If you don't want to go the absolute position route, you can do it two ways: substitute a box-shadow the increased border if your don't mind the compatibility compromise or use box-sizing:border-box. The only problem with box-sizing:border-box is that it shifts your content inward (the style rule calculates the total width + padding + border-width in the width attribute. If you set a 5px border to a 100px box, the width is normally 110px to include both left and right borders. With the box-sizing attribute it calculates the border width into the width making it 90px wide instead to allow for the 10px of border width).

j08691 already has the box-sizing solution in his answer, so here is the box-shadow method (notice that I only added 1px of box shadow. This is because the border is still present providing half of the desired width):

 .action_box {   width: 300px;   height: 200px;   border: 1px solid black;   float: left;   margin-left: 10px;   margin-top: 10px; } .action_box p {   border: 1px solid black;   margin-top: 0px;   text-align: center; } .action_box:hover {   box-shadow: 0 0 0 1px black;   cursor: pointer; }

<div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div>

How to prevent shifting when adding border on hover? (Transparent border is not a solution)

You can simply fix this with outline property

.inner-container:hover {
  outline: 1px solid blue;
 }

and if you are using big border
eg:
set outline:3px; solid blue; then use outline-offset:-3px;

try with demo

https://jsfiddle.net/be7441LL/2/

Change border width without moving other table elements

Add padding to the table cell equal to the difference of the border size.

So if the largest border width is going to be 3px, when the button is not selected, your table cell should have a padding of 2px and your button should have a border of 1px. When the button is selected the table cell should have a padding of 0 and the button should have a border of 3px.

In this manner, no visible change will be made when selecting a button.

Don't affect positioning of other elements on border-width changes

There are a couple of different ways you can go about achieving the effect you desire.

1. Using box-sizing: border-box:

Normally, neighbouring elements are affected by the changing an element's border-width property, because the elements are relatively positioned and the space each one occupies changes when the border-width changes. Using box-sizing: border-box ensures the width of the border is included in the dimensions of the element.

.cercle {
    box-sizing: border-box;
}

2. Using box-shadow:

An alternative would be to use box-shadow property, instead, to imitate the visual appearance of a border but without its particular behaviour. The shadow of an element doesn't affect neighbouring elements when modified, so it's another good option to consider when trying to achieve the effect you desire.

.cercle {
    box-shadow: inset 0 0 0 4px #ff9c08;
}

.menu:hover > .cercle {
    box-shadow: inset 0 0 0 2px #ff9c08;
}

Check out more about the browser compatibility of box-sizing and box-shadow to see which suits you better. An updated version of your jsfiddle can be found here and a snippet just below.

Snippet:

.menu {  margin-right: 10px;  cursor: pointer;}
.cercle {  width: 16px;  height: 16px;  display: inline-block;  margin-right: 5px;  vertical-align: middle;  border-radius: 16px;  }
#ex1 .cercle {  border: 4px solid #ff9c08;  box-sizing: border-box;}
#ex1 .menu:hover i {  border-width: 2px;  transition: border-width .1s;}
#ex2 .cercle {  box-shadow: inset 0 0 0 4px #ff9c08;}
#ex2 .menu:hover .cercle {  box-shadow: inset 0 0 0 2px #ff9c08;  transition: box-shadow .1s;}

<div id = "ex1">  <span class="menu"><i class="cercle"></i>Foo</span>  <span class="menu"><i class="cercle"></i>Bar</span></div><br><div id = "ex2">  <span class="menu"><i class="cercle"></i>Foo</span>  <span class="menu"><i class="cercle"></i>Bar</span></div>

Stop text moving when border change width

You can fix the text by manipulating element padding and making it part of the animation:

CSS

.main .box ul li{padding:18px; margin-bottom: 1px;}

JS

$(".box ul li").hover(function() {
   $(this).animate({borderWidth: 20, padding:2}, "fast");
 }, function() {
   $(this).animate({borderWidth: 2, padding:18}, "fast");
});

see http://jsfiddle.net/6VjCr/

How to prevent div elements from moving when border is applied to div?

The easiest solution is to provide a transparent border to the div that you are adding a border to when hovering.

.container {
  display: inline-flex;
  align-items: center;
  border: 2px solid transparent;
}

how can i increase border width on hover without dislodging the div position in css?

The simplest would be to set box-sizing: border-box; and increase the elements size with the border's now set width.

Since box-sizing: border-box; make border width within the size of the element, it will keep its size on a border resize.

Side notes:

Don't forget to add the non-prefixed transition: border .4s ease-in; to your rule.

Be also aware of that dotted borders in Firefox and Edge/IE11 doesn't look the same as in Chrome.

FF doesn't show it at all actually, Dashed border not showing in firefox

#f {  left:10px;  top:10px;  position:fixed;  box-sizing: border-box;  border:10px dotted #0db;  border-radius:50%;  width:53px;  height:53px;  -webkit-transition: border .4s ease-in;  -moz-transition: border .4s ease-in;  -o-transition: border .4s ease-in;  transition: border .4s ease-in;}
#f:hover {  border: 20px dotted #fb0;}

<div id="f"></div>

When 1 px border is added to div, Div size increases, Don't want to do that

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 (discontinued), 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 */
}

---

Related Topics