Border on hover moves divs inside parent [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
CSS hover border makes inline elements adjust slightly
13 answers
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.
html css
edited Nov 9 at 5:12
Foo
1
asked Nov 9 at 5:07
raduzrc
527
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 9 at 7:13
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
CSS hover border makes inline elements adjust slightly
13 answers
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.
html css
edited Nov 9 at 5:12
Foo
1
asked Nov 9 at 5:07
raduzrc
527
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 9 at 7:13
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Can you explore more what do you want?
– Firoz
Nov 9 at 5:12
@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 9 at 5:14
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
CSS hover border makes inline elements adjust slightly
13 answers
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.
html css
edited Nov 9 at 5:12
Foo
1
asked Nov 9 at 5:07
raduzrc
527
This question already has an answer here:
CSS hover border makes inline elements adjust slightly
13 answers
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.
This question already has an answer here:
CSS hover border makes inline elements adjust slightly
13 answers
.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 -->.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 -->html css
html css
edited Nov 9 at 5:12
Foo
1
asked Nov 9 at 5:07
raduzrc
527
edited Nov 9 at 5:12
Foo
1
asked Nov 9 at 5:07
raduzrc
527
edited Nov 9 at 5:12
Foo
1
edited Nov 9 at 5:12
Foo
1
edited Nov 9 at 5:12
Foo
1
1
asked Nov 9 at 5:07
raduzrc
527
asked Nov 9 at 5:07
raduzrc
527
asked Nov 9 at 5:07
raduzrc
527
527
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 9 at 7:13
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 9 at 7:13
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Can you explore more what do you want?
– Firoz
Nov 9 at 5:12
@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 9 at 5:14
add a comment |
Can you explore more what do you want?
– Firoz
Nov 9 at 5:12
@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 9 at 5:14
Can you explore more what do you want?
– Firoz
Nov 9 at 5:12
Can you explore more what do you want?
– Firoz
Nov 9 at 5:12
@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 9 at 5:14
@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 9 at 5:14
add a comment |
2 Answers
2
active
oldest
votes
up vote
2
down vote
accepted
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 9 at 5:18
Hanif
2,5421511
See here: jsfiddle.net/pmn8y4hd/3
– Hanif
Nov 9 at 5: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 9 at 5:25
add a comment |
up vote
0
down vote
.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
answered Nov 9 at 5:26
Jose Manuel Zuñiga Moreno
207
I tried that before posting. it doesn't work.
– raduzrc
Nov 9 at 5:28
let me try it on brackets the snippet is not working for me
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:33
it is working, maybe you didnt use it in the correct div ?
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:41
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 9 at 5: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 9 at 6:13
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
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 9 at 5:18
Hanif
2,5421511
See here: jsfiddle.net/pmn8y4hd/3
– Hanif
Nov 9 at 5: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 9 at 5:25
add a comment |
up vote
2
down vote
accepted
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 9 at 5:18
Hanif
2,5421511
See here: jsfiddle.net/pmn8y4hd/3
– Hanif
Nov 9 at 5: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 9 at 5:25
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
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 9 at 5:18
Hanif
2,5421511
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 9 at 5:18
Hanif
2,5421511
answered Nov 9 at 5:18
Hanif
2,5421511
answered Nov 9 at 5:18
Hanif
2,5421511
answered Nov 9 at 5:18
Hanif
2,5421511
2,5421511
See here: jsfiddle.net/pmn8y4hd/3
– Hanif
Nov 9 at 5: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 9 at 5:25
add a comment |
See here: jsfiddle.net/pmn8y4hd/3
– Hanif
Nov 9 at 5: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 9 at 5:25
See here: jsfiddle.net/pmn8y4hd/3
– Hanif
Nov 9 at 5:19
See here: jsfiddle.net/pmn8y4hd/3
– Hanif
Nov 9 at 5: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 9 at 5:25
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 9 at 5:25
add a comment |
up vote
0
down vote
.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
answered Nov 9 at 5:26
Jose Manuel Zuñiga Moreno
207
I tried that before posting. it doesn't work.
– raduzrc
Nov 9 at 5:28
let me try it on brackets the snippet is not working for me
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:33
it is working, maybe you didnt use it in the correct div ?
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:41
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 9 at 5: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 9 at 6:13
add a comment |
up vote
0
down vote
.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
answered Nov 9 at 5:26
Jose Manuel Zuñiga Moreno
207
I tried that before posting. it doesn't work.
– raduzrc
Nov 9 at 5:28
let me try it on brackets the snippet is not working for me
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:33
it is working, maybe you didnt use it in the correct div ?
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:41
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 9 at 5: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 9 at 6:13
add a comment |
up vote
0
down vote
up vote
0
down vote
.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
answered Nov 9 at 5:26
Jose Manuel Zuñiga Moreno
207
.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
.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>.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>answered Nov 9 at 5:26
Jose Manuel Zuñiga Moreno
207
edited Nov 9 at 6:11
answered Nov 9 at 5:26
Jose Manuel Zuñiga Moreno
207
answered Nov 9 at 5:26
Jose Manuel Zuñiga Moreno
207
answered Nov 9 at 5:26
Jose Manuel Zuñiga Moreno
207
207
I tried that before posting. it doesn't work.
– raduzrc
Nov 9 at 5:28
let me try it on brackets the snippet is not working for me
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:33
it is working, maybe you didnt use it in the correct div ?
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:41
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 9 at 5: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 9 at 6:13
add a comment |
I tried that before posting. it doesn't work.
– raduzrc
Nov 9 at 5:28
let me try it on brackets the snippet is not working for me
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:33
it is working, maybe you didnt use it in the correct div ?
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:41
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 9 at 5: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 9 at 6:13
I tried that before posting. it doesn't work.
– raduzrc
Nov 9 at 5:28
I tried that before posting. it doesn't work.
– raduzrc
Nov 9 at 5:28
let me try it on brackets the snippet is not working for me
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:33
let me try it on brackets the snippet is not working for me
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:33
it is working, maybe you didnt use it in the correct div ?
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:41
it is working, maybe you didnt use it in the correct div ?
– Jose Manuel Zuñiga Moreno
Nov 9 at 5:41
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 9 at 5:50
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 9 at 5: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 9 at 6:13
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 9 at 6:13
add a comment |
Can you explore more what do you want?
– Firoz
Nov 9 at 5:12
@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 9 at 5:14