'How to keep content in a container, but extend it's background full width in CSS?

I am trying to develop a design that looks like:

Design image

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.

htmlcsscss-position


Solution 1:[1]

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.

Solution 2:[2]

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>

Solution 3:[3]

You can use two columns aligned to the centre of the screen with a max width of half the container size

.article-container{
max-width:1200px;
margin-left:auto;
margin-right:auto;
}
section{
margin-bottom:2rem;}

.article-grid{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
}
article{
flex:1 50%;
display: flex;
font-family: arial;
 }
article:nth-of-type(1){
background-color:blue;
color:white;
justify-content: flex-end;
}
article:nth-of-type(2){
background-color:red;
color:white;
justify-content: flex-start;
}

.article-inner-grid{
max-width: 600px;
}
.article-padding{
padding:2rem;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amaury Hanser
Solution 2
Solution 3 Kevin Neal

Related Questions