CSS Divs Jumping When Border Added

CSS Divs Jumping when Border Added

That is because border width adds to the element's width, thus when an additional width is added to an element on hover, it will alter the normal layout flow.

You can easily fix it by adding a 3px transparent border in the static state:

.card { border: 3px solid transparent; }

jsFiddle fork: https://jsfiddle.net/azizn/pL2j0zu5/

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 */
}

Add a CSS border on hover without moving the element

You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around:

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

How to prevent element jump to new row in div?

Use these styles

ul {
  display: flex;
}
.tree {
  overflow: auto;
}

* {  margin: 0;  padding: 0;}
.tree ul {  padding-top: 20px;  position: relative;  transition: all 0.5s;  -webkit-transition: all 0.5s;  -moz-transition: all 0.5s;}
.tree li {  text-align: center;  list-style-type: none;  position: relative;  padding: 20px 5px 0 5px;  transition: all 0.5s;  -webkit-transition: all 0.5s;  -moz-transition: all 0.5s;}

/*We will use ::before and ::after to draw the connectors*/
.tree li::before,.tree li::after {  content: '';  position: absolute;  top: 0;  right: 50%;  border-top: 1px solid black;  width: 50%;  height: 20px;}
.tree li::after {  right: auto;  left: 50%;  border-left: 1px solid black;}

/*We need to remove left-right connectors from elements without any siblings*/
.tree li:only-child::after,.tree li:only-child::before {  display: none;}

/*Remove space from the top of single children*/
.tree li:only-child {  padding-top: 0;}

/*Remove left connector from first child and right connector from last child*/
.tree li:first-child::before,.tree li:last-child::after {  border: 0 none;}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {  border-right: 1px solid black;  border-radius: 0 5px 0 0;  -webkit-border-radius: 0 5px 0 0;  -moz-border-radius: 0 5px 0 0;}
.tree li:first-child::after {  border-radius: 5px 0 0 0;  -webkit-border-radius: 5px 0 0 0;  -moz-border-radius: 5px 0 0 0;}

/*Time to add downward connectors from parents*/
.tree ul ul::before {  content: '';  position: absolute;  top: 0;  left: 50%;  border-left: 1px solid black;  width: 0;  height: 20px;}
.tree li a {  border: 1px solid black;  padding: 5px 10px;  text-decoration: none;  color: black;  font-family: arial, verdana, tahoma;  font-size: 18px;  display: inline-block;  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  transition: all 0.5s;  -webkit-transition: all 0.5s;  -moz-transition: all 0.5s;}

/*Time for some hover effects*/

/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,.tree li a:hover+ul li a {  background: #c8e4f8;  color: #000;  border: 1px solid #94a0b4;}

/*Connector styles on hover*/
.tree li a:hover+ul li::after,.tree li a:hover+ul li::before,.tree li a:hover+ul::before,.tree li a:hover+ul ul::before {  border-color: #94a0b4;}
ul {  display: flex;}
.tree {  overflow: auto;}

<div class="tree" style="float:left; background-color:#3FC; padding-bottom:20px; white-space: nowrap; display: inline-block; width:200px;">  <ul>    <li>      demo
      <ul>        <li>          alibaba        </li>
        <li>          michelle
          <ul>            <li>              jason

              <ul>                <li>                  洪英杰                </li>
                <li>                  bilgate                </li>              </ul>
            </li>          </ul>
          <li>            lala stich          </li>      </ul>
      </li>  </ul></div>

How come my divs are jumping around during a transition?

It is because you are only setting the transition for the height but you are also changing the element's margin as well. Try this so they transition at the same time.

.catalog-item {
   width: 150px;
   height: 175px;
   margin-right: 20px;
   /*margin-bottom: 20px;*/
   margin-bottom: 60px;
   background-color: white;
   border: 1px solid #0E80B4;
   display: inline-block;
   vertical-align: top;
    position: relative;
   -moz-transition: all .4s;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   transition: all .4s;
   text-align: center;
}

JSFiddle

Prevent elements moving when dynamically adding a border

Yes, there is. You must use box-sizing: borde-box together with vendor prefixes to achieve this. Here is what I mean:

document.addEventListener("mouseover", eOnMouseOver, true);document.addEventListener("mouseout", eOnMouseOut, true);
function eOnMouseOver(e) {  e.target.style.outline = "2px solid red";}
function eOnMouseOut(e) {  e.target.style.outline = "";}

* {  box-sizing: border-box;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;  -o-box-sizing: border-box;}

<div style="border:1px black solid;">Mouseover me</div><a href="#">Mouseover me</a>

How do I prevent jumping of a div when simultanously resizing divs?

Try using .siblings() to decrease width of elements not clicked to 7.5% , set clicked element width to 80%. This should total 95%, leaving 5% of viewport width for space between elements. Set css display to inline-block, overflow to hidden to clip text within elements, width set to 30% to evenly space the three div elements within viewport

$("[id^=kg]").click(function() {  $(this).siblings()  .animate({    width:"7.5%"  }, 500);  $(this).animate({    width:"80%"  }, 500)})

div[id^="kg"] {  width: 30%;  height: 138px;  border: 1px solid #000;  text-align: center;  display:inline-block;  overflow:hidden;  text-overflow: ellipsis;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div>    <div id="kg-left" class="role-container role-container-left">        SOME TEXT    </div>
    <div id="kg-middle" class="role-container role-container-middle">        MORE TEXT    </div>
    <div id="kg-right" class="role-container role-container-right">        EVEN MORE TEXT    </div><div><div>rest of html</div>

HTML, CSS: Divs automatically jump into next row

You can use a combination of flex and flex-wrap for this:

#parent {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1em;
}

.child {
  width: 100px;
  height: 200px;
  background: #cee;
}

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS: Adding border to button on hover. How avoiding a shifting of the following elements?

Add "margin" attributes to your "button" CSS like so:

button {
  border-radius: 4px;
  padding: 5px 10px;
  margin: 4px 0;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
  margin: 0;
}

From Stop an element moving with padding on hover.

---

Related Topics