Kevin Powell - Community•3mo ago

Two Column Layout, but the other one goes to edge.

Hi everyone, may I ask the best way to make a layout like this responsively? The red square will be an image. The red line indicates the container of the site. But the image should go way to the edge of the view port. Thank you for the response.

9 Replies

Nibelung ValestiOP•3mo ago

TLDR; The content should be inside the container but the image should span to the right edge

Chris Bolson•3mo ago

~~It would be best if you shared your code on Codepen or similar. Other wise it is just guess work.~~ Sorry, I miss-read this post.

Fancy Nancy•3mo ago

Use relative positioning + negative margin on the image container. Example:

<div class="container">
    <div class="text-section">
        <p>text</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
</div>

<div class="container">
    <div class="text-section">
        <p>text</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
</div>

.container {
    display: flex;
    max-width: 60rem; /* Whatever max width you prefer */
    margin: 0 auto;
    padding: 1rem;
}

.text-section {
    flex: 1;
    padding: 1rem;
}

.image-section {
    flex: 1;
    right: 50%;
    margin-right: -50vw;
    position: relative;
}

.image-section img {
    width: 100vw;
}

.container {
    display: flex;
    max-width: 60rem; /* Whatever max width you prefer */
    margin: 0 auto;
    padding: 1rem;
}

.text-section {
    flex: 1;
    padding: 1rem;
}

.image-section {
    flex: 1;
    right: 50%;
    margin-right: -50vw;
    position: relative;
}

.image-section img {
    width: 100vw;
}

clevermissfox•3mo ago

With the tools available nowadays like grid this solution is kind of hack imo But also depends on the project size and use case Setting up a grid system like this could do it but if it’s a small project , I may instead use a pseudo element for the image

Kevin Powell

YouTube

A new approach to container and wrapper classes

The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...

Fancy Nancy•3mo ago

Oh, neat! That is indeed a much more elegant solution. Updating my previous answer:

<div class="grid-container">
    <div class="text-section">
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
  <div class="content-section">Another section</div>
</div>

<div class="grid-container">
    <div class="text-section">
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
  <div class="content-section">Another section</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 
        [full-width-start]
        10vw
        [content-start]
        1fr 1fr 
        [content-end]
        10vw
        [full-width-end];
}

.grid-container > * {
  padding: 2rem;
}

.text-section {
    grid-column: content-start;
}

.image-section {
    grid-column: 3 / full-width-end;
}

.content-section {
  grid-column: content;
}

.image-section img {
    width: 100%;
}

.grid-container {
    display: grid;
    grid-template-columns: 
        [full-width-start]
        10vw
        [content-start]
        1fr 1fr 
        [content-end]
        10vw
        [full-width-end];
}

.grid-container > * {
  padding: 2rem;
}

.text-section {
    grid-column: content-start;
}

.image-section {
    grid-column: 3 / full-width-end;
}

.content-section {
  grid-column: content;
}

.image-section img {
    width: 100%;
}

I am Groot•3mo ago

If you want to stick to the naming concept of grid-lines, you could create another grid-line-name of [center-line] min(100% - (var(--padding-inline) * 2), 100% / 2; that way you could over-engingeer this correctly and change .image-section { grid-column: center-line / full-width-end

Nibelung ValestiOP•2mo ago

Hi everyone, I'm sorry for the late response. But here is my attempt to replicate the situation, The image should still respect the container but should stretch until the edge of the screen on the other side. Is there a way to make it responsive so that it fits naturally and do not overlap the screen? Like do I need calc for that? https://codepen.io/Jeremy-Mapalad-the-encoder/pen/JoPPLRj

Jeremy Mapalad

CodePen

Breakout Section

...

Nibelung ValestiOP•2mo ago

Thanks for the response! But what if my columns are not equal, for example left section is col-4 and the right section which has an image is col-8?

b1mind•2mo ago

I would avoid using vw as a hard unit. It will not account for scrollbars. %or grids fr is a better option. Ultimately I would use grid and probably something like what missfox linked (its teh way).

Gaming

Programming

Two Column Layout, but the other one goes to edge.

Did you find this page helpful?