CSS expand element background to fit a container with padding
up vote
-2
down vote
favorite
I have a container with padding that includes child's elements.
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>When I hover on one of the children I want the background to fit the width of the container, how can I do it?
Note that I don't want to add the padding to the children.
html css
asked Nov 7 at 7:55
undefined
7961419
add a comment |
up vote
-2
down vote
favorite
I have a container with padding that includes child's elements.
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>When I hover on one of the children I want the background to fit the width of the container, how can I do it?
Note that I don't want to add the padding to the children.
html css
asked Nov 7 at 7:55
undefined
7961419
add a comment |
up vote
-2
down vote
favorite
up vote
-2
down vote
favorite
I have a container with padding that includes child's elements.
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>When I hover on one of the children I want the background to fit the width of the container, how can I do it?
Note that I don't want to add the padding to the children.
html css
asked Nov 7 at 7:55
undefined
7961419
I have a container with padding that includes child's elements.
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>When I hover on one of the children I want the background to fit the width of the container, how can I do it?
Note that I don't want to add the padding to the children.
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>html css
html css
asked Nov 7 at 7:55
undefined
7961419
asked Nov 7 at 7:55
undefined
7961419
asked Nov 7 at 7:55
undefined
7961419
asked Nov 7 at 7:55
undefined
7961419
asked Nov 7 at 7:55
undefined
7961419
7961419
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
up vote
2
down vote
accepted
Try following way, I applied pseudo element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
position:relative;
}
div::after {
display:none;
}
div:hover::after {
display:block;
position:absolute;
z-index:-1;
content:"";
top:0;
left:-10px;
right:-10px;
bottom:0;
background-color:red;
}
</style>
</head>
<body>
<section>
<div>One</div>
<div>Two</div>
</section>
</body>
</html>answered Nov 7 at 8:00
Hanif
2,4611511
add a comment |
up vote
1
down vote
I don't get why you don't want to add padding to the children.. Because if you just lose the padding on the section and put it on the div, all is solved!
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
}
section div {
padding: 10px
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:04
Wimanicesir
3349
because in real life it's more complicated than that.
– undefined
Nov 7 at 8:14
add a comment |
up vote
0
down vote
If you don't want to use js and you can't remove the padding from the section, you can use :before and :after.
section {
width: 100px;
border: 1px solid;
padding: 10px;
position: relative;
}
div > span {
position: relative;
z-index: 2;
}
div:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: red;
opacity: 0;
}
div:hover:before {
opacity: 1;
}<section>
<div>
<span>one</span>
</div>
<div>
<span>two</span>
</div>
</section>answered Nov 7 at 8:05
vmoh_ir
1,1341223
add a comment |
up vote
0
down vote
If you define section padding just for top and bottom and add padding to divs for right and left you can achieve what you want:
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px 0px;
}
section div {
padding: 0px 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:08
Ryan.Hunt
2,50811020
add a comment |
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
Try following way, I applied pseudo element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
position:relative;
}
div::after {
display:none;
}
div:hover::after {
display:block;
position:absolute;
z-index:-1;
content:"";
top:0;
left:-10px;
right:-10px;
bottom:0;
background-color:red;
}
</style>
</head>
<body>
<section>
<div>One</div>
<div>Two</div>
</section>
</body>
</html>answered Nov 7 at 8:00
Hanif
2,4611511
add a comment |
up vote
2
down vote
accepted
Try following way, I applied pseudo element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
position:relative;
}
div::after {
display:none;
}
div:hover::after {
display:block;
position:absolute;
z-index:-1;
content:"";
top:0;
left:-10px;
right:-10px;
bottom:0;
background-color:red;
}
</style>
</head>
<body>
<section>
<div>One</div>
<div>Two</div>
</section>
</body>
</html>answered Nov 7 at 8:00
Hanif
2,4611511
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
Try following way, I applied pseudo element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
position:relative;
}
div::after {
display:none;
}
div:hover::after {
display:block;
position:absolute;
z-index:-1;
content:"";
top:0;
left:-10px;
right:-10px;
bottom:0;
background-color:red;
}
</style>
</head>
<body>
<section>
<div>One</div>
<div>Two</div>
</section>
</body>
</html>answered Nov 7 at 8:00
Hanif
2,4611511
Try following way, I applied pseudo element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
position:relative;
}
div::after {
display:none;
}
div:hover::after {
display:block;
position:absolute;
z-index:-1;
content:"";
top:0;
left:-10px;
right:-10px;
bottom:0;
background-color:red;
}
</style>
</head>
<body>
<section>
<div>One</div>
<div>Two</div>
</section>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
position:relative;
}
div::after {
display:none;
}
div:hover::after {
display:block;
position:absolute;
z-index:-1;
content:"";
top:0;
left:-10px;
right:-10px;
bottom:0;
background-color:red;
}
</style>
</head>
<body>
<section>
<div>One</div>
<div>Two</div>
</section>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px;
}
div:hover {
background: red;
position:relative;
}
div::after {
display:none;
}
div:hover::after {
display:block;
position:absolute;
z-index:-1;
content:"";
top:0;
left:-10px;
right:-10px;
bottom:0;
background-color:red;
}
</style>
</head>
<body>
<section>
<div>One</div>
<div>Two</div>
</section>
</body>
</html>answered Nov 7 at 8:00
Hanif
2,4611511
edited Nov 7 at 8:06
answered Nov 7 at 8:00
Hanif
2,4611511
answered Nov 7 at 8:00
Hanif
2,4611511
answered Nov 7 at 8:00
Hanif
2,4611511
2,4611511
add a comment |
add a comment |
up vote
1
down vote
I don't get why you don't want to add padding to the children.. Because if you just lose the padding on the section and put it on the div, all is solved!
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
}
section div {
padding: 10px
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:04
Wimanicesir
3349
because in real life it's more complicated than that.
– undefined
Nov 7 at 8:14
add a comment |
up vote
1
down vote
I don't get why you don't want to add padding to the children.. Because if you just lose the padding on the section and put it on the div, all is solved!
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
}
section div {
padding: 10px
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:04
Wimanicesir
3349
because in real life it's more complicated than that.
– undefined
Nov 7 at 8:14
add a comment |
up vote
1
down vote
up vote
1
down vote
I don't get why you don't want to add padding to the children.. Because if you just lose the padding on the section and put it on the div, all is solved!
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
}
section div {
padding: 10px
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:04
Wimanicesir
3349
I don't get why you don't want to add padding to the children.. Because if you just lose the padding on the section and put it on the div, all is solved!
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
}
section div {
padding: 10px
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
}
section div {
padding: 10px
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
}
section div {
padding: 10px
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:04
Wimanicesir
3349
answered Nov 7 at 8:04
Wimanicesir
3349
answered Nov 7 at 8:04
Wimanicesir
3349
answered Nov 7 at 8:04
Wimanicesir
3349
3349
because in real life it's more complicated than that.
– undefined
Nov 7 at 8:14
add a comment |
because in real life it's more complicated than that.
– undefined
Nov 7 at 8:14
because in real life it's more complicated than that.
– undefined
Nov 7 at 8:14
because in real life it's more complicated than that.
– undefined
Nov 7 at 8:14
add a comment |
up vote
0
down vote
If you don't want to use js and you can't remove the padding from the section, you can use :before and :after.
section {
width: 100px;
border: 1px solid;
padding: 10px;
position: relative;
}
div > span {
position: relative;
z-index: 2;
}
div:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: red;
opacity: 0;
}
div:hover:before {
opacity: 1;
}<section>
<div>
<span>one</span>
</div>
<div>
<span>two</span>
</div>
</section>answered Nov 7 at 8:05
vmoh_ir
1,1341223
add a comment |
up vote
0
down vote
If you don't want to use js and you can't remove the padding from the section, you can use :before and :after.
section {
width: 100px;
border: 1px solid;
padding: 10px;
position: relative;
}
div > span {
position: relative;
z-index: 2;
}
div:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: red;
opacity: 0;
}
div:hover:before {
opacity: 1;
}<section>
<div>
<span>one</span>
</div>
<div>
<span>two</span>
</div>
</section>answered Nov 7 at 8:05
vmoh_ir
1,1341223
add a comment |
up vote
0
down vote
up vote
0
down vote
If you don't want to use js and you can't remove the padding from the section, you can use :before and :after.
section {
width: 100px;
border: 1px solid;
padding: 10px;
position: relative;
}
div > span {
position: relative;
z-index: 2;
}
div:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: red;
opacity: 0;
}
div:hover:before {
opacity: 1;
}<section>
<div>
<span>one</span>
</div>
<div>
<span>two</span>
</div>
</section>answered Nov 7 at 8:05
vmoh_ir
1,1341223
If you don't want to use js and you can't remove the padding from the section, you can use :before and :after.
section {
width: 100px;
border: 1px solid;
padding: 10px;
position: relative;
}
div > span {
position: relative;
z-index: 2;
}
div:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: red;
opacity: 0;
}
div:hover:before {
opacity: 1;
}<section>
<div>
<span>one</span>
</div>
<div>
<span>two</span>
</div>
</section>section {
width: 100px;
border: 1px solid;
padding: 10px;
position: relative;
}
div > span {
position: relative;
z-index: 2;
}
div:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: red;
opacity: 0;
}
div:hover:before {
opacity: 1;
}<section>
<div>
<span>one</span>
</div>
<div>
<span>two</span>
</div>
</section>section {
width: 100px;
border: 1px solid;
padding: 10px;
position: relative;
}
div > span {
position: relative;
z-index: 2;
}
div:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: red;
opacity: 0;
}
div:hover:before {
opacity: 1;
}<section>
<div>
<span>one</span>
</div>
<div>
<span>two</span>
</div>
</section>answered Nov 7 at 8:05
vmoh_ir
1,1341223
answered Nov 7 at 8:05
vmoh_ir
1,1341223
answered Nov 7 at 8:05
vmoh_ir
1,1341223
answered Nov 7 at 8:05
vmoh_ir
1,1341223
1,1341223
add a comment |
add a comment |
up vote
0
down vote
If you define section padding just for top and bottom and add padding to divs for right and left you can achieve what you want:
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px 0px;
}
section div {
padding: 0px 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:08
Ryan.Hunt
2,50811020
add a comment |
up vote
0
down vote
If you define section padding just for top and bottom and add padding to divs for right and left you can achieve what you want:
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px 0px;
}
section div {
padding: 0px 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:08
Ryan.Hunt
2,50811020
add a comment |
up vote
0
down vote
up vote
0
down vote
If you define section padding just for top and bottom and add padding to divs for right and left you can achieve what you want:
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px 0px;
}
section div {
padding: 0px 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:08
Ryan.Hunt
2,50811020
If you define section padding just for top and bottom and add padding to divs for right and left you can achieve what you want:
body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px 0px;
}
section div {
padding: 0px 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px 0px;
}
section div {
padding: 0px 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>body {
margin: 50px;
}
* {
box-sizing: border-box;
}
section {
width: 100px;
border: 1px solid;
padding: 10px 0px;
}
section div {
padding: 0px 10px;
}
div:hover {
background: red;
}<section>
<div>One</div>
<div>Two</div>
</section>answered Nov 7 at 8:08
Ryan.Hunt
2,50811020
answered Nov 7 at 8:08
Ryan.Hunt
2,50811020
answered Nov 7 at 8:08
Ryan.Hunt
2,50811020
answered Nov 7 at 8:08
Ryan.Hunt
2,50811020
2,50811020
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53185403%2fcss-expand-element-background-to-fit-a-container-with-padding%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
