Border on hover moves divs inside parent

Question

I have a div that has 2 children: an image and 2 lines of text. I add border:1px solid #grey; on hover to the div but for some reason, it also moves the children inside the div as well.

Here is my example: http://jsfiddle.net/pmn8y4hd/

.candidates{
    width:100%;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    padding: 40px 0 45px 0;
    margin: 0 0 12px 0;
}
.candidate{
    width:310px;
    margin: 0 auto 10px;
    height: auto;
    padding: 16px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.candidate:hover{
    background: #FFFDFC;
    border: 1px solid #EAEAEA;
    border-radius: 6px;
}

.candidate-details{
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.candidate-image{
    width:48px;
    height: 48px;
    float:left;
    margin: 0 10px 0 0;
}

.candidate-image img{
    width:100%;
}

<div class="candidates">
   <div class="candidate">
      <div class="candidate-image">
         <img src="images/logo.png" alt="" title="" />
      </div><!-- candidate-image -->

      <div class="candidate-details">
         <h3>Johnny Appleseed</h3>
         <h4>Space Monkey at NASA</h4>
      </div><!-- candidate-details -->
   </div><!-- candidate -->
</div><!-- candidates -->

I have added box-sizing: border-box; but it does do anything.

@Firoz Sorry I thought it was self explanatory. I want to have a border on hover without the image and the text moving inside — raduzrc, Nov 09 '18 at 05:14

score 2 · Accepted Answer · answered Nov 09 '18 at 05:18

2

Although you applied it box-sizing: border-box; and added css width but it solve only horizontal movement because not fixed any height. So overcome this situation you should apply 1px size transparent border like following:

.candidate{
width:310px;
margin: 0 auto 10px;
height: auto;
padding: 16px 15px;
border: 1px solid transparent; /* Key Line */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

answered Nov 09 '18 at 05:18

Hanif

3,739
1
12
18

See here: http://jsfiddle.net/pmn8y4hd/3/ – Hanif Nov 09 '18 at 05:19
thanks it works. My only question: shouldn't border-box fix this? I thought it was what border-box does. I tried adding fixed height and the problem is still there. Your solution works though. – raduzrc Nov 09 '18 at 05:25

Jose Manuel Zuñiga Moreno · Answer 2 · 2018-11-09T06:11:45.560

.candidates {
    overflow: hidden;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    padding: 40px 0 45px 0;
    margin: 0 0 12px 0;
}
.candidate {
    width: 310px;
    margin: 0 auto 10px;
    height: auto;
    padding: 16px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid white;
}
.candidate:hover {
    background: red;
    border-radius: 6px;
}
.candidate-details {
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
;
}
.candidate-image {
    width: 48px;
    height: 48px;
    float: left;
    margin: 0 10px 0 0;
}
.candidate-image img {
    width: 100%;
}

<!DOCTYPE html>
<html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/tried.css">
    <!--- FONTS --->
    <link href="https://fonts.googleapis.com/css?family=Domine|Roboto" rel="stylesheet" type='text/css'>
    <title>Importa Desde China</title>
</head>
<!--- Quitar Subrayado --->
<STYLE>
    A {
        text-decoration: none;
    }

</STYLE>
<!--- Quitar Subrayado --->

<body>
    <div class="candidates">
        <div class="candidate">
            <div class="candidate-image">
                <img src="https://i.imgur.com/6jVYOQa.jpg" alt="" title="" />
            </div>
            <!-- candidate-image -->

            <div class="candidate-details">
                <h3>Johnny Appleseed</h3>
                <h4>Space Monkey at NASA</h4>
            </div>
            <!-- candidate-details -->
        </div>
        <!-- candidate -->
    </div>
    <!-- candidates -->

</body>

</html>

check out overflow, https://www.w3schools.com/cssref/pr_pos_overflow.asp this will automaticly fix anything that tries to go their own way, without making more margins or paddings

I used it on .candidate. that is the div that gets the border. The problem is still there for me. I see the problem even in your code snippet above. I tried IE and chrome and the problem is still there. Adding a transparent border on the div solves it but I am curious as to why isn't border-box fixing it. — raduzrc, Nov 09 '18 at 05:50
i changed the code i had to color it, it was pretty much an error with the borders, that extended a border outside a div, check out if that code works for you now, i think that was what your looking for — Jose Manuel Zuñiga Moreno, Nov 09 '18 at 06:13

Border on hover moves divs inside parent

2 Answers2