Make containers respect grid but fill remaining space

Question

I am having some trouble trying to create a layout like the image below. The left and right columns should take up 2/3 and 1/3 respectively of the main container max-width (which is centered using margin: auto;), but the remaining width of the page should be filled by the background image or the color of the column.

Is there some way to accomplish this with css?

Answer 1

It's a little tricky.

The problem is to avoid that the background image is cropped out of the body of the page, while a simple color fill is easier. Try using :after and :before pseudo-elements with position:absolute; and putting there the background rules.

Then you need to force to fit all the page in all resolutions, so try these rules:

#left-column{
  float:left;
  width: 66.66%;
  height:200px;
  position:relative;
}
#left-column:before{
  position:absolute;
  /* for this example I used a free-copyright image from pixabay.com */
  background:url(https://pixabay.com/static/uploads/photo/2016/05/01/00/57/barn-1364280_960_720.jpg) no-repeat;
  background-size: 100% 100%;
  top:0;
  right:0;
  width:100%;
  padding-left:100%;
  height:100%;
  content:'';
  display:block;
}
#right-column{
  height:200px;
  float:left;
  width:33.33%;
  position:relative;
}
#right-column:after{
  position:absolute;
  background:green;
  top:0;
  left:0;
  width:10000px;
  height:100%;
  content:'';
  display:block;
}

To show the content inside the columns give them a position:relative; z-index:1;.

Then you need to add to the body the following rule to avoid that backgrounds creates horizontal scroll-bar

body{
  overflow-x:hidden;
}

To see it in a working example go here. .

If you prefer a more-accurate solution I think you must use javascript

Answer 2

You can emulate this with pseudo elements with large width:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  margin-bottom: 16px;
}

.wrapper {
  overflow-x: hidden;
  min-height: 100vh;
}

.container {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  max-width: 800px;
  height: 700px;
  margin: 0 auto;
}

.cols {
  min-height: 300px;
  display: flex;
}

.left {
  background: linear-gradient(to right, #F9B80E, #E3342E);
  flex: 0 0 66.6%;
  position: relative;
}

.left:before {
  content: '';
  background: linear-gradient(to right, #FFED21, #F9B80E);
  position: absolute;
  right: 100%;
  width: 1000px;
  top: 0;
  bottom: 0;
}

.right {
  background: #E5E5E4;
  position: relative;
  padding: 20px;
}

.right:after {
  content: '';
  background: #E5E5E4;
  position: absolute;
  left: 100%;
  width: 1000px;
  top: 0;
  bottom: 0;
}

<div class="wrapper">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <div class="cols">
      <div class="left"></div>
      <div class="right">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat esse, corporis, quis accusantium, adipisci sequi animi cupiditate distinctio blanditiis consequuntur illo molestias velit dolorem qui sit voluptas. Labore cupiditate, quis.</p>
      </div>
    </div>
  </div>
</div>