How to keep content in a container, but extend it's background full width in CSS?
0
I am trying to develop a design that looks like:
In the design above the red lines are the sides of the container. I am keeping the content of the section within a container div like so:
.container {
width: 1200px;
margin: 0 auto;
}
But I would then want the blue background div to the content on the left to extend the full width of the screen, breaking out of the container while keeping the content within the blue background inside the container.
I can't seem to find the best way to dev this out keeping the content in the container, but the blue background div to extend all the way to the left of the screen.
html css css-position
edited Nov 20 '18 at 15:34
TylerH
15.9k105368
asked Nov 20 '18 at 13:19
user9664977user9664977
599
|
show 3 more comments
0
I am trying to develop a design that looks like:
In the design above the red lines are the sides of the container. I am keeping the content of the section within a container div like so:
.container {
width: 1200px;
margin: 0 auto;
}
But I would then want the blue background div to the content on the left to extend the full width of the screen, breaking out of the container while keeping the content within the blue background inside the container.
I can't seem to find the best way to dev this out keeping the content in the container, but the blue background div to extend all the way to the left of the screen.
html css css-position
edited Nov 20 '18 at 15:34
TylerH
15.9k105368
asked Nov 20 '18 at 13:19
user9664977user9664977
599
css-tricks.com/full-width-containers-limited-width-parents
– misorude
Nov 20 '18 at 13:21
you can pseudo styles to to that. add bg to left container, remove container overflow hidden, add pseduo style :before of left container and add width 100% and right 100%
– Manjunath
Nov 20 '18 at 13:21
@Manjunath Just tried that approach and it works to get the blue background to go full width and keep the content within the container. But the only issue is with the blue background being position:absolute it doesn't grow in height to fit the size of the content
– user9664977
Nov 20 '18 at 13:32
@misorude That link doesn't really explain what I am trying to do. Yes they are taking a div full width outside of the container, but what I am trying to do is keep it 50% of the width and also have content within that element that is breaking the container, like in my example image above
– user9664977
Nov 20 '18 at 13:34
1
So what is stopping you from countering the effect of that negative margin(-left) by an equal amount of padding-left, to push the content to the inside again …?
– misorude
Nov 20 '18 at 13:47
|
show 3 more comments
0
0
0
I am trying to develop a design that looks like:
In the design above the red lines are the sides of the container. I am keeping the content of the section within a container div like so:
.container {
width: 1200px;
margin: 0 auto;
}
But I would then want the blue background div to the content on the left to extend the full width of the screen, breaking out of the container while keeping the content within the blue background inside the container.
I can't seem to find the best way to dev this out keeping the content in the container, but the blue background div to extend all the way to the left of the screen.
html css css-position
edited Nov 20 '18 at 15:34
TylerH
15.9k105368
asked Nov 20 '18 at 13:19
user9664977user9664977
599
I am trying to develop a design that looks like:
In the design above the red lines are the sides of the container. I am keeping the content of the section within a container div like so:
.container {
width: 1200px;
margin: 0 auto;
}
But I would then want the blue background div to the content on the left to extend the full width of the screen, breaking out of the container while keeping the content within the blue background inside the container.
I can't seem to find the best way to dev this out keeping the content in the container, but the blue background div to extend all the way to the left of the screen.
html css css-position
html css css-position
edited Nov 20 '18 at 15:34
TylerH
15.9k105368
asked Nov 20 '18 at 13:19
user9664977user9664977
599
edited Nov 20 '18 at 15:34
TylerH
15.9k105368
asked Nov 20 '18 at 13:19
user9664977user9664977
599
edited Nov 20 '18 at 15:34
TylerH
15.9k105368
edited Nov 20 '18 at 15:34
TylerH
15.9k105368
edited Nov 20 '18 at 15:34
TylerH
15.9k105368
15.9k105368
asked Nov 20 '18 at 13:19
user9664977user9664977
599
asked Nov 20 '18 at 13:19
user9664977user9664977
599
asked Nov 20 '18 at 13:19
user9664977user9664977
599
599
css-tricks.com/full-width-containers-limited-width-parents
– misorude
Nov 20 '18 at 13:21
you can pseudo styles to to that. add bg to left container, remove container overflow hidden, add pseduo style :before of left container and add width 100% and right 100%
– Manjunath
Nov 20 '18 at 13:21
@Manjunath Just tried that approach and it works to get the blue background to go full width and keep the content within the container. But the only issue is with the blue background being position:absolute it doesn't grow in height to fit the size of the content
– user9664977
Nov 20 '18 at 13:32
@misorude That link doesn't really explain what I am trying to do. Yes they are taking a div full width outside of the container, but what I am trying to do is keep it 50% of the width and also have content within that element that is breaking the container, like in my example image above
– user9664977
Nov 20 '18 at 13:34
1
So what is stopping you from countering the effect of that negative margin(-left) by an equal amount of padding-left, to push the content to the inside again …?
– misorude
Nov 20 '18 at 13:47
|
show 3 more comments
css-tricks.com/full-width-containers-limited-width-parents
– misorude
Nov 20 '18 at 13:21
you can pseudo styles to to that. add bg to left container, remove container overflow hidden, add pseduo style :before of left container and add width 100% and right 100%
– Manjunath
Nov 20 '18 at 13:21
@Manjunath Just tried that approach and it works to get the blue background to go full width and keep the content within the container. But the only issue is with the blue background being position:absolute it doesn't grow in height to fit the size of the content
– user9664977
Nov 20 '18 at 13:32
@misorude That link doesn't really explain what I am trying to do. Yes they are taking a div full width outside of the container, but what I am trying to do is keep it 50% of the width and also have content within that element that is breaking the container, like in my example image above
– user9664977
Nov 20 '18 at 13:34
1
So what is stopping you from countering the effect of that negative margin(-left) by an equal amount of padding-left, to push the content to the inside again …?
– misorude
Nov 20 '18 at 13:47
css-tricks.com/full-width-containers-limited-width-parents
– misorude
Nov 20 '18 at 13:21
css-tricks.com/full-width-containers-limited-width-parents
– misorude
Nov 20 '18 at 13:21
you can pseudo styles to to that. add bg to left container, remove container overflow hidden, add pseduo style :before of left container and add width 100% and right 100%
– Manjunath
Nov 20 '18 at 13:21
you can pseudo styles to to that. add bg to left container, remove container overflow hidden, add pseduo style :before of left container and add width 100% and right 100%
– Manjunath
Nov 20 '18 at 13:21
@Manjunath Just tried that approach and it works to get the blue background to go full width and keep the content within the container. But the only issue is with the blue background being position:absolute it doesn't grow in height to fit the size of the content
– user9664977
Nov 20 '18 at 13:32
@Manjunath Just tried that approach and it works to get the blue background to go full width and keep the content within the container. But the only issue is with the blue background being position:absolute it doesn't grow in height to fit the size of the content
– user9664977
Nov 20 '18 at 13:32
@misorude That link doesn't really explain what I am trying to do. Yes they are taking a div full width outside of the container, but what I am trying to do is keep it 50% of the width and also have content within that element that is breaking the container, like in my example image above
– user9664977
Nov 20 '18 at 13:34
@misorude That link doesn't really explain what I am trying to do. Yes they are taking a div full width outside of the container, but what I am trying to do is keep it 50% of the width and also have content within that element that is breaking the container, like in my example image above
– user9664977
Nov 20 '18 at 13:34
1
1
So what is stopping you from countering the effect of that negative margin(-left) by an equal amount of padding-left, to push the content to the inside again …?
– misorude
Nov 20 '18 at 13:47
So what is stopping you from countering the effect of that negative margin(-left) by an equal amount of padding-left, to push the content to the inside again …?
– misorude
Nov 20 '18 at 13:47
|
show 3 more comments
2 Answers
2
active
oldest
votes
0
One way to achieve what you are looking for is to use a pseudo element to simulate a background.
The key is to position the pseudo element, and to give him the proper size.
Here is an exemple:
* {
box-sizing: border-box;
}
.container {
max-width: 400px;
padding: 20px 0;
margin: 0 auto;
}
.container:after {
content:'';
display: table;
height: 0;
clear: both;
}
.w50 {
float: left;
width: 50%;
position: relative;
z-index: 2;
}
.w50:first-child:before {
content:'';
background: #ddd;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
z-index: -1;
}<div class="container">
<div class="w50">
<h2>First child</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
</div>
<div class="w50">
<h2>Second child</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
</div>
</div>Here is how to achieve it :
- Add
position: relative;to the element which needs the background. - Add a peusdo element
:before. - Add
position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;to that pseudo element.
answered Nov 20 '18 at 15:15
Amaury HanserAmaury Hanser
697516
add a comment |
0
Here is my solution for your problem. Adjust the fixed sizes to what you want to achieve. Try to view my example in full screen.
body{
background-color: #cccccc;
width: 100%;
padding: 0px;
margin: 0px;
}
div.containerA {
position: relative;
top: 100px;
width: 100%;
background-color: lightblue;
}
div.containerB {
width: 800px;
margin: 0 auto;
display: flex;
}
div.contentA {
width: 50%;
flex: 0 0 50%;
}
div.contentB {
position: relative;
right: -100px;
width: 50%;
flex: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="containerA">
<div class="containerB">
<div class="contentA">
<h1>Title 1</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div class="contentB">
<h1>Title 2</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div>
</div>
</body>
</html>answered Nov 20 '18 at 15:18
BBBBBB
207
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393906%2fhow-to-keep-content-in-a-container-but-extend-its-background-full-width-in-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
One way to achieve what you are looking for is to use a pseudo element to simulate a background.
The key is to position the pseudo element, and to give him the proper size.
Here is an exemple:
* {
box-sizing: border-box;
}
.container {
max-width: 400px;
padding: 20px 0;
margin: 0 auto;
}
.container:after {
content:'';
display: table;
height: 0;
clear: both;
}
.w50 {
float: left;
width: 50%;
position: relative;
z-index: 2;
}
.w50:first-child:before {
content:'';
background: #ddd;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
z-index: -1;
}<div class="container">
<div class="w50">
<h2>First child</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
</div>
<div class="w50">
<h2>Second child</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
</div>
</div>Here is how to achieve it :
- Add
position: relative;to the element which needs the background. - Add a peusdo element
:before. - Add
position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;to that pseudo element.
answered Nov 20 '18 at 15:15
Amaury HanserAmaury Hanser
697516
add a comment |
0
One way to achieve what you are looking for is to use a pseudo element to simulate a background.
The key is to position the pseudo element, and to give him the proper size.
Here is an exemple:
* {
box-sizing: border-box;
}
.container {
max-width: 400px;
padding: 20px 0;
margin: 0 auto;
}
.container:after {
content:'';
display: table;
height: 0;
clear: both;
}
.w50 {
float: left;
width: 50%;
position: relative;
z-index: 2;
}
.w50:first-child:before {
content:'';
background: #ddd;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
z-index: -1;
}<div class="container">
<div class="w50">
<h2>First child</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
</div>
<div class="w50">
<h2>Second child</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
</div>
</div>Here is how to achieve it :
- Add
position: relative;to the element which needs the background. - Add a peusdo element
:before. - Add
position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;to that pseudo element.
answered Nov 20 '18 at 15:15
Amaury HanserAmaury Hanser
697516
add a comment |
0
0
0
One way to achieve what you are looking for is to use a pseudo element to simulate a background.
The key is to position the pseudo element, and to give him the proper size.
Here is an exemple:
* {
box-sizing: border-box;
}
.container {
max-width: 400px;
padding: 20px 0;
margin: 0 auto;
}
.container:after {
content:'';
display: table;
height: 0;
clear: both;
}
.w50 {
float: left;
width: 50%;
position: relative;
z-index: 2;
}
.w50:first-child:before {
content:'';
background: #ddd;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
z-index: -1;
}<div class="container">
<div class="w50">
<h2>First child</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
</div>
<div class="w50">
<h2>Second child</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
</div>
</div>Here is how to achieve it :
- Add
position: relative;to the element which needs the background. - Add a peusdo element
:before. - Add
position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;to that pseudo element.
answered Nov 20 '18 at 15:15
Amaury HanserAmaury Hanser
697516
One way to achieve what you are looking for is to use a pseudo element to simulate a background.
The key is to position the pseudo element, and to give him the proper size.
Here is an exemple:
* {
box-sizing: border-box;
}
.container {
max-width: 400px;
padding: 20px 0;
margin: 0 auto;
}
.container:after {
content:'';
display: table;
height: 0;
clear: both;
}
.w50 {
float: left;
width: 50%;
position: relative;
z-index: 2;
}
.w50:first-child:before {
content:'';
background: #ddd;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
z-index: -1;
}<div class="container">
<div class="w50">
<h2>First child</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
</div>
<div class="w50">
<h2>Second child</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
</div>
</div>Here is how to achieve it :
- Add
position: relative;to the element which needs the background. - Add a peusdo element
:before. - Add
position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;to that pseudo element.
* {
box-sizing: border-box;
}
.container {
max-width: 400px;
padding: 20px 0;
margin: 0 auto;
}
.container:after {
content:'';
display: table;
height: 0;
clear: both;
}
.w50 {
float: left;
width: 50%;
position: relative;
z-index: 2;
}
.w50:first-child:before {
content:'';
background: #ddd;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
z-index: -1;
}<div class="container">
<div class="w50">
<h2>First child</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
</div>
<div class="w50">
<h2>Second child</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
</div>
</div>* {
box-sizing: border-box;
}
.container {
max-width: 400px;
padding: 20px 0;
margin: 0 auto;
}
.container:after {
content:'';
display: table;
height: 0;
clear: both;
}
.w50 {
float: left;
width: 50%;
position: relative;
z-index: 2;
}
.w50:first-child:before {
content:'';
background: #ddd;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
z-index: -1;
}<div class="container">
<div class="w50">
<h2>First child</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
</p>
</div>
<div class="w50">
<h2>Second child</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
</div>
</div>answered Nov 20 '18 at 15:15
Amaury HanserAmaury Hanser
697516
answered Nov 20 '18 at 15:15
Amaury HanserAmaury Hanser
697516
answered Nov 20 '18 at 15:15
Amaury HanserAmaury Hanser
697516
answered Nov 20 '18 at 15:15
Amaury HanserAmaury Hanser
697516
697516
add a comment |
add a comment |
0
Here is my solution for your problem. Adjust the fixed sizes to what you want to achieve. Try to view my example in full screen.
body{
background-color: #cccccc;
width: 100%;
padding: 0px;
margin: 0px;
}
div.containerA {
position: relative;
top: 100px;
width: 100%;
background-color: lightblue;
}
div.containerB {
width: 800px;
margin: 0 auto;
display: flex;
}
div.contentA {
width: 50%;
flex: 0 0 50%;
}
div.contentB {
position: relative;
right: -100px;
width: 50%;
flex: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="containerA">
<div class="containerB">
<div class="contentA">
<h1>Title 1</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div class="contentB">
<h1>Title 2</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div>
</div>
</body>
</html>answered Nov 20 '18 at 15:18
BBBBBB
207
add a comment |
0
Here is my solution for your problem. Adjust the fixed sizes to what you want to achieve. Try to view my example in full screen.
body{
background-color: #cccccc;
width: 100%;
padding: 0px;
margin: 0px;
}
div.containerA {
position: relative;
top: 100px;
width: 100%;
background-color: lightblue;
}
div.containerB {
width: 800px;
margin: 0 auto;
display: flex;
}
div.contentA {
width: 50%;
flex: 0 0 50%;
}
div.contentB {
position: relative;
right: -100px;
width: 50%;
flex: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="containerA">
<div class="containerB">
<div class="contentA">
<h1>Title 1</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div class="contentB">
<h1>Title 2</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div>
</div>
</body>
</html>answered Nov 20 '18 at 15:18
BBBBBB
207
add a comment |
0
0
0
Here is my solution for your problem. Adjust the fixed sizes to what you want to achieve. Try to view my example in full screen.
body{
background-color: #cccccc;
width: 100%;
padding: 0px;
margin: 0px;
}
div.containerA {
position: relative;
top: 100px;
width: 100%;
background-color: lightblue;
}
div.containerB {
width: 800px;
margin: 0 auto;
display: flex;
}
div.contentA {
width: 50%;
flex: 0 0 50%;
}
div.contentB {
position: relative;
right: -100px;
width: 50%;
flex: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="containerA">
<div class="containerB">
<div class="contentA">
<h1>Title 1</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div class="contentB">
<h1>Title 2</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div>
</div>
</body>
</html>answered Nov 20 '18 at 15:18
BBBBBB
207
Here is my solution for your problem. Adjust the fixed sizes to what you want to achieve. Try to view my example in full screen.
body{
background-color: #cccccc;
width: 100%;
padding: 0px;
margin: 0px;
}
div.containerA {
position: relative;
top: 100px;
width: 100%;
background-color: lightblue;
}
div.containerB {
width: 800px;
margin: 0 auto;
display: flex;
}
div.contentA {
width: 50%;
flex: 0 0 50%;
}
div.contentB {
position: relative;
right: -100px;
width: 50%;
flex: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="containerA">
<div class="containerB">
<div class="contentA">
<h1>Title 1</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div class="contentB">
<h1>Title 2</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div>
</div>
</body>
</html>body{
background-color: #cccccc;
width: 100%;
padding: 0px;
margin: 0px;
}
div.containerA {
position: relative;
top: 100px;
width: 100%;
background-color: lightblue;
}
div.containerB {
width: 800px;
margin: 0 auto;
display: flex;
}
div.contentA {
width: 50%;
flex: 0 0 50%;
}
div.contentB {
position: relative;
right: -100px;
width: 50%;
flex: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="containerA">
<div class="containerB">
<div class="contentA">
<h1>Title 1</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div class="contentB">
<h1>Title 2</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div>
</div>
</body>
</html>body{
background-color: #cccccc;
width: 100%;
padding: 0px;
margin: 0px;
}
div.containerA {
position: relative;
top: 100px;
width: 100%;
background-color: lightblue;
}
div.containerB {
width: 800px;
margin: 0 auto;
display: flex;
}
div.contentA {
width: 50%;
flex: 0 0 50%;
}
div.contentB {
position: relative;
right: -100px;
width: 50%;
flex: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="containerA">
<div class="containerB">
<div class="contentA">
<h1>Title 1</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div class="contentB">
<h1>Title 2</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
</div>
<div>
</div>
</body>
</html>answered Nov 20 '18 at 15:18
BBBBBB
207
edited Nov 20 '18 at 15:24
answered Nov 20 '18 at 15:18
BBBBBB
207
answered Nov 20 '18 at 15:18
BBBBBB
207
answered Nov 20 '18 at 15:18
BBBBBB
207
207
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393906%2fhow-to-keep-content-in-a-container-but-extend-its-background-full-width-in-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
css-tricks.com/full-width-containers-limited-width-parents
– misorude
Nov 20 '18 at 13:21
you can pseudo styles to to that. add bg to left container, remove container overflow hidden, add pseduo style :before of left container and add width 100% and right 100%
– Manjunath
Nov 20 '18 at 13:21
@Manjunath Just tried that approach and it works to get the blue background to go full width and keep the content within the container. But the only issue is with the blue background being position:absolute it doesn't grow in height to fit the size of the content
– user9664977
Nov 20 '18 at 13:32
@misorude That link doesn't really explain what I am trying to do. Yes they are taking a div full width outside of the container, but what I am trying to do is keep it 50% of the width and also have content within that element that is breaking the container, like in my example image above
– user9664977
Nov 20 '18 at 13:34
1
So what is stopping you from countering the effect of that negative margin(-left) by an equal amount of padding-left, to push the content to the inside again …?
– misorude
Nov 20 '18 at 13:47