keep HTML floating elements in place when size changed

Question

I have no idea how to keep the elements in place. When I hover over a floating element, the border is adjusted but this pushes the other elements around (the images are 300x300px). How can I keep them in place? Thanks in advance.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>These are images</h1>
    <div id="container">
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>

        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
    </div>    
</body>
</html>

The style.css file is:

.imgDiv {
float:left;
border: 1px solid black;
text-align:center;
border-radius:10px;
margin: 0px 10px 10px 0px;
} 
.img {
border-radius:10px;
} 
.imgDiv:hover {
border: 5px solid black;
}

A possible answer here? https://stackoverflow.com/questions/8625812/css-hover-border-makes-inline-elements-adjust-slightly — ConsoleLog, Jul 29 '18 at 18:16
I think the **Title** of my post is more **relevant** than the title of the above-mentioned thread. — liwei7907, Jul 30 '18 at 05:32

score 0 · Answer 1 · answered Jul 29 '18 at 17:48

Reduce margin while hover to keep DIVs position.

.imgDiv {
  float:left;
  border: 1px solid black;
  text-align:center;
  border-radius:10px;
  margin: 5px;
}
.img {
  border-radius:10px;
} 
.imgDiv:hover {
  border: 5px solid black;
  margin: 1px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>These are images</h1>
    <div id="container">
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>

        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
        <div class="imgDiv">
            <img class="img"/>
            <h3>Click on image!</h3>
        </div>
    </div>    
</body>
</html>

score -1 · Answer 2 · answered Jul 29 '18 at 17:59

-1

add this line to .imgDive:hover

margin: -4px 6px 10px -4px !important;

answered Jul 29 '18 at 17:59

codegames

1,651
18
16

keep HTML floating elements in place when size changed

2 Answers2