Divs move downwards when padding expands on hover - html

Question

I have two divs, when one hovers over the text (which are links) of a div, the padding increases from 0 to 5px. My issue is that whenever I hover over the text and the padding increases, the divs move down. Here's the code:
<div id="container" class="text1">
<a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>
<div id="container" class="text2">
<a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>
#container {
position:relative;
}
a:link, a:visited, a:active {
color:blue;
}
a:hover {
color:yellow;
}
.text1box {
left:200px;
bottom:35px;
width:243px;
}
#text1style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}
#text1style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}
.text2 {
left:455px;
bottom:57px;
width:90px;
}
#text2style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}
#text2style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}
Updated code: I have applied the padding expansion to the individual links, instead of the div, and this has helped out. I still have two issues: 1) The texts (of links) still shift slightly to the right. 2) When I remove the mouse (i.e: hover ends) you can see that the text has lost padding and border radius as the background (red) fades away.
How could I resolve these two issues? Many thanks.

Answer 1

You can do that by moving the 2 boxes upward to compensate for the padding moving them downward.
And id should be unique
.container {
position: relative;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
transition: background-color 0.5s;
background-color: red;
text-align: center;
}
.box1 {
left: 200px;
/*bottom: 35px;*/
width: 221px;
border-radius: 10px;
}
.box2 {
left: 455px;
/*bottom: 57px;*/
width: 66px;
border-radius: 10px;
}
a:link,
a:visited,
a:active {
color: blue;
}
a:hover {
color: yellow;
}
.container:hover {
top: -5px;
padding: 5px 0;
background-color: dodgerblue;
}
.container.box1:hover + .box2 {
top: -10px;
}
<div id="container1" class="container box1">
<a href="#" style="font-size:120%;
text-decoration:none;">Some text</a>
</div>
<div id="container2" class="container box2">
<a href="#" style="font-size:120%;
text-decoration:none;">text</a>
</div>
Based on question edit, updated with a 2:nd sample, where I added padding: 0 5px to the a:link rule to compensate for the hovered padding
#container1, #container2 {
position: relative;
}
a:link,
a:visited,
a:active {
color: blue;
padding: 0 5px;
}
a:hover {
color: yellow;
}
.text1box {
left: 200px;
bottom: 35px;
width: 243px;
}
#text1style {
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
transition: background-color 0.5s;
}
#text1style:hover {
padding: 5px;
border-radius: 10px;
background-color: red;
}
.text2 {
left: 455px;
bottom: 57px;
width: 90px;
}
#text2style {
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
transition: background-color 0.5s;
}
#text2style:hover {
padding: 5px;
border-radius: 10px;
background-color: red;
}
<div id="container1" class="text1">
<a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>
<div id="container2" class="text2">
<a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>

Answer 2

I created a jsfiddle for you:
https://jsfiddle.net/squeLsa6/
<div id="" class="box1 container">
Some text
</div>
<div id="" class="box2 container">
text
</div>
<style type="text/css">
.container {
position:relative;
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
padding:5px;
}
a:link, a:visited, a:active {
color:blue;
padding:5px;
}
a:hover {
color:yellow;
padding:5px;
}
.box1 {
left:200px;
bottom:35px;
width:221px;
border-radius:10px;
}
.box2 {
left:455px;
bottom:57px;
width:66px;
border-radius:10px;
}
.container:hover {
background-color:dodgerblue;
}
</style>
Basically I moved the padding from the hover state to the a's and the container. I also converted container to be a class, because id's should be unique. I'm not sure exactly how you want it to work, so you may need to play with it a little, but this should get you started.

Answer 3

First of all, you confused the id with classes. I changed the name ID with CLASS and it works; In the Css the classes have "." and IDs have "#", be aware of this. When i hover on the div it take a padding of 5px and it is natural that the other div lightly move due to the padding.
If you don't want to move the box you have to give padding anywhere apart of padding-bottom.