A centered layout design with a background that extends beyond the element

Question

A centered layout design with a background that extends beyond the element

I am facing a challenging problem with a relatively simple layout.

To summarize

My layout is centered
The sidebar background should extend all the way to the left
The section background should extend all the way to the right
The backgrounds are purely visual, the layout remains centered
The sections have variable heights
I attempted to use CSS grid to create a full-width layout, but it caused the center grouping to be lost
I experimented with :before and :after with absolute positioning, but it failed when applying overflow-y scroll to the containers
I prefer not to use JavaScript for the solution

html,
body {
padding: 0;
margin: 0;
height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  background: #eee;
}

main {
  margin: 0 auto;
  width: 600px;
  background: #ddd;
  height: 100%;
  display: flex;
}

aside {
  background: #ccc;
  height: 100%;
  width: 100px;
  overflow-y: auto;
}

.content {
  flex: 1;
  overflow-y: auto;
}

section {
  display: block;
  width: 100%;
}

section.blue {
  background: blue;
 }
 
 section.yellow {
  background: yellow;
 }
 
 section.green {
  background: green;
 }

<div class="wrap">
  <main>
    <aside>Aside</aside>
    <div class="content">
      <section class="blue">Blue</section>
      <section class="yellow">Yellow</section>
      <section class="green">Green</section>
    </div>
  </main>
</div>

Visual Representation of the Desired Result

https://i.sstatic.net/qZ5B2.png

html css

Answer 1

Answer №1

Here is a technique using CSS grid and clever padding adjustments:

html,
body {
padding: 0;
margin: 0;
height: 100%;
}

.wrap {
  height: 100%;
  background:#eee;
}

main { 
  background: linear-gradient(#ddd,#ddd) center/600px 100% no-repeat;  /*Color only 600px */
  height: 100%;
  display: grid;
  grid-template-areas:"aside aside content content";
  grid-template-columns:1fr 100px 500px 1fr
}

aside {
  background: #ccc;
  height: 100%;
  grid-area:aside;
  padding-left: calc(100% - 100px); /*the content inside only 100px on the right*/
  overflow-y: auto;
}

.content {
  overflow-y: auto;
  grid-area:content;
}

section {
  padding-right:calc(100% - 500px); /*the content inside only 500px on the left*/
}

section.blue {background: blue;}
section.yellow {background: yellow;}
section.green {background: green;}

<div class="wrap">
  <main>
    <aside>Aside</aside>
    <div class="content">
      <section class="blue"> Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue </section>
      <section class="yellow">Yellow</section>
      <section class="green">Green</section>
    </div>
  </main>
</div>

Another approach utilizing flexbox:

html,
body {
padding: 0;
margin: 0;
height: 100%;
}

.wrap {
  height: 100%;
  background:#eee;
}

main { 
  background: linear-gradient(#ddd,#ddd) center/600px 100% no-repeat;  /*Color only 600px */
  height: 100%;
  display: flex;
}

aside {
  background: #ccc;
  height: 100%;
  flex-basis:100px; /* main width */
  flex-grow:1; 
  overflow-y: auto;
}
aside div {
    padding-left: calc(100% - 100px); /*the content inside only 100px on the right*/
}

.content {
  overflow-y: auto;
  flex-basis:500px; /* main width */
  flex-grow:1;
}

section {
  padding-right:calc(100% - 500px); /*the content inside only 500px on the left*/
}

section.blue {background: blue;}
section.yellow {background: yellow;}
section.green {background: green;}

<div class="wrap">
  <main>
    <aside><div>Aside</div></aside>
    <div class="content">
      <section class="blue"> Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue </section>
      <section class="yellow">Yellow</section>
      <section class="green">Green</section>
    </div>
  </main>
</div>

Answer 2

Here is a technique using CSS grid and clever padding adjustments:

html,
body {
padding: 0;
margin: 0;
height: 100%;
}

.wrap {
  height: 100%;
  background:#eee;
}

main { 
  background: linear-gradient(#ddd,#ddd) center/600px 100% no-repeat;  /*Color only 600px */
  height: 100%;
  display: grid;
  grid-template-areas:"aside aside content content";
  grid-template-columns:1fr 100px 500px 1fr
}

aside {
  background: #ccc;
  height: 100%;
  grid-area:aside;
  padding-left: calc(100% - 100px); /*the content inside only 100px on the right*/
  overflow-y: auto;
}

.content {
  overflow-y: auto;
  grid-area:content;
}

section {
  padding-right:calc(100% - 500px); /*the content inside only 500px on the left*/
}

section.blue {background: blue;}
section.yellow {background: yellow;}
section.green {background: green;}

<div class="wrap">
  <main>
    <aside>Aside</aside>
    <div class="content">
      <section class="blue"> Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue </section>
      <section class="yellow">Yellow</section>
      <section class="green">Green</section>
    </div>
  </main>
</div>

Another approach utilizing flexbox:

html,
body {
padding: 0;
margin: 0;
height: 100%;
}

.wrap {
  height: 100%;
  background:#eee;
}

main { 
  background: linear-gradient(#ddd,#ddd) center/600px 100% no-repeat;  /*Color only 600px */
  height: 100%;
  display: flex;
}

aside {
  background: #ccc;
  height: 100%;
  flex-basis:100px; /* main width */
  flex-grow:1; 
  overflow-y: auto;
}
aside div {
    padding-left: calc(100% - 100px); /*the content inside only 100px on the right*/
}

.content {
  overflow-y: auto;
  flex-basis:500px; /* main width */
  flex-grow:1;
}

section {
  padding-right:calc(100% - 500px); /*the content inside only 500px on the left*/
}

section.blue {background: blue;}
section.yellow {background: yellow;}
section.green {background: green;}

<div class="wrap">
  <main>
    <aside><div>Aside</div></aside>
    <div class="content">
      <section class="blue"> Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue </section>
      <section class="yellow">Yellow</section>
      <section class="green">Green</section>
    </div>
  </main>
</div>

Answer 3

Answer №2

Here's a technique utilizing CSS Grid layout - it may seem like a detailed explanation, but here it is:

Position the aside and content in the second and third columns of a 4-column grid (using
```
grid-template-columns: 1fr 100px 500px 1fr
```
),
Extend the second column (aside) to the first using negative margins and padding:
```
margin-left: calc(-50vw + 300px);
padding-left: calc(50vw - 300px);
```
(note that the width of the leftmost and rightmost columns after the second and third occupy 600px)

Similarly, extend the third column (content) using:

margin-right: calc(-50vw + 300px);
padding-right: calc(50vw - 300px);

The content is a column flexbox with a pseudo element that manages the background,
The blue, yellow, and green section backgrounds are extended using
```
padding-right: calc(50vw - 300px)
```
.

Check out the demo below:

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  background: #eee;
}

main {
  background: #ddd;
  display: grid; /* grid container */
  grid-template-columns: 1fr 100px 500px 1fr; /* 4 columns */
  height: 100%;
}

aside {
  background: #ccc;
  height: 100%;
  width: 100px;
  overflow-y: auto;
  grid-column: 2; /* place in second column */
  /* extend to first column */
  margin-left: calc(-50vw + 300px);
  padding-left: calc(50vw - 300px);
}

content {
  grid-column: 3; /* place in thrid column */
  /* extend to fourth column */
  margin-right: calc(-50vw + 300px);
  padding-right: calc(50vw - 300px);
  /* column flexbox for the sections */
  display: flex; 
  flex-direction: column;
  overflow-y: auto;
}

content:after { /* serves as background*/
  flex: 1;
  content: '';
  background: #bbb;
}

section { /* extend sections to fourth column*/
  width: 100%;
  padding-right: calc(50vw - 300px);
}

section.blue {
  background: blue;
}

section.yellow {
  background: yellow;
}

section.green {
  background: green;
}

<div class="wrap">
  <main>
    <aside>Aside - some text here some text here some text here some text here some text here some text here some text here </aside>
    <div class="content">
      <section class="blue">Blue - some text here some text here some text here some text here some text here some text here some text here some text here </section>
      <section class="yellow">Yellow - some text here some text here some text here some text here some text here some text here some text here some text here some text here </section>
      <section class="green">Green - some text here some text here some text here some text here some text here some text here some text here some text here some text here </section>
    </div>
  </main>
</div>

Answer 4

Here's a technique utilizing CSS Grid layout - it may seem like a detailed explanation, but here it is:

Position the aside and content in the second and third columns of a 4-column grid (using
```
grid-template-columns: 1fr 100px 500px 1fr
```
),
Extend the second column (aside) to the first using negative margins and padding:
```
margin-left: calc(-50vw + 300px);
padding-left: calc(50vw - 300px);
```
(note that the width of the leftmost and rightmost columns after the second and third occupy 600px)

Similarly, extend the third column (content) using:

margin-right: calc(-50vw + 300px);
padding-right: calc(50vw - 300px);

The content is a column flexbox with a pseudo element that manages the background,
The blue, yellow, and green section backgrounds are extended using
```
padding-right: calc(50vw - 300px)
```
.

Check out the demo below:

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  background: #eee;
}

main {
  background: #ddd;
  display: grid; /* grid container */
  grid-template-columns: 1fr 100px 500px 1fr; /* 4 columns */
  height: 100%;
}

aside {
  background: #ccc;
  height: 100%;
  width: 100px;
  overflow-y: auto;
  grid-column: 2; /* place in second column */
  /* extend to first column */
  margin-left: calc(-50vw + 300px);
  padding-left: calc(50vw - 300px);
}

content {
  grid-column: 3; /* place in thrid column */
  /* extend to fourth column */
  margin-right: calc(-50vw + 300px);
  padding-right: calc(50vw - 300px);
  /* column flexbox for the sections */
  display: flex; 
  flex-direction: column;
  overflow-y: auto;
}

content:after { /* serves as background*/
  flex: 1;
  content: '';
  background: #bbb;
}

section { /* extend sections to fourth column*/
  width: 100%;
  padding-right: calc(50vw - 300px);
}

section.blue {
  background: blue;
}

section.yellow {
  background: yellow;
}

section.green {
  background: green;
}

<div class="wrap">
  <main>
    <aside>Aside - some text here some text here some text here some text here some text here some text here some text here </aside>
    <div class="content">
      <section class="blue">Blue - some text here some text here some text here some text here some text here some text here some text here some text here </section>
      <section class="yellow">Yellow - some text here some text here some text here some text here some text here some text here some text here some text here some text here </section>
      <section class="green">Green - some text here some text here some text here some text here some text here some text here some text here some text here some text here </section>
    </div>
  </main>
</div>

A centered layout design with a background that extends beyond the element

Visual Representation of the Desired Result

Answer №1

Answer №2

Similar questions

Webpage unable to scroll

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

Adjust css style based on the current time of day

What is causing the failure of generating a DIV element with JQuery?

Once the image is requested in HTML, three.js makes a subsequent request for the same image

Two sets of buttons, however, one set is carrying out the incorrect function

How to set element height based on screen height rather than browser height

html form-- assistance required in making new input area appear upon clicking radio button

What is the best way to ensure that TwentyTwenty.js images are always positioned in the

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

What could be causing the extra space around my body on mobile devices?

Creating movement effects for a line on an HTML5 canvas following a previous animation

Ensure the beginning and ending times are accurate for newly added input fields using jQuery

Height specification in Tailwind Grid

Can CSS Grid be substituted for Material UI's grid component?

How to insert space after every item generated by ng-repeat in AngularJS

Extracting text within quotation marks from HTML using Java and Selenium WebDriver

Employ the $scope.go() method within a function written in JavaScript

Is it permissible to utilize the ::Before::Before element?

When trying to change the audio source using jQuery, HTML audio is having trouble locating the