Overflow:hidden argh!

Bloke · 2020-05-04 15:30:43

I’m missing something obvious and all the tutorials and hacks I’ve found have so far failed and I wonder if anybody has any insight.

The scenario:

Client has usual the usual page structure:

<body>
<nav>...</nav>
<div class="wrapper">
   <div class="container">
      ... article content ...
   </div>
</div>
<footer>...</footer>
</body>

They have a series of greyscale images they want as ‘background’ elements behind the page content – inside the wrapper/container only. Each image is a square of about 280px.

My thinking was to add an absolute div inside the wrapper and use <txp:images> to dump the pics one after the other, then lay them out in a column at narrowest widths, kinda centred down the page. And then maybe in two or three columns as the viewport widens.

Easy.

Except the pics always fall out of the container and pop out below the footer at certain widths. I cannot for the life of me get a combination of overflow:hidden or other CSS to constrain the images.

I’ve injected the images in a container called “clipper” thus:

<body>
<nav>...</nav>
<div class="wrapper">
   <div class="clipper">
      <div class="bg_pics">
         <img src="/images/1.jpg" alt="" width="283" height="283" />
         <img src="/images/2.jpg" alt="" width="283" height="283" />
         <img src="/images/3.jpg" alt="" width="283" height="283" />
         ...
      </div>
   </div>
   <div class="container">
      ... article content ...
   </div>
</div>
<footer>...</footer>@ page structure.
</body>

And this is the CSS I have so far:

.bg_pics {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    max-width: 70%;
}
.clipper {
    overflow: hidden;
}
.bg_pics img {
    margin: 0 auto;
}

As the viewport widens, the media queries adjust:

.bg_pics img {
    width: 42%;
    margin: 1em auto;
}

.bg_pics img {
    width: 30%;
}

and so on…

No dice.

Am I being unrealistic in my expectation that the ‘clipper’ should constrain the child elements?
Is the width/height of the img tags killing my attempts?
Is there another approach to do this?
Is z-index: -1 a silly idea?

I tried various permutations of display:flex and its various properties as well, without success.

Any guidance or “a-ha” moments appreciated. Thank you.

jakob · 2020-05-04 16:53:02

Hehe, tricky one that. position: absolute; takes that element out of the page flow, so your article content always needs to be longer than the background to prevent the background images extending into what follows.

I expect there are several solutions, but here are two ways – both a bit of a trick – for layering two divs on top of each other while allowing them to take up the space they need.

1 – Using flexbox and nowrap to ensure the items stay on one line, make both full-width items and pull one back on top with negative margin:

.wrapper {
    display: flex;
    flex-flow: row nowrap;
}
.clipper,
.container {
    box-sizing: border-box;
    width: 100%;
    flex: none;
}
.container {
    margin-left: -100%;
}

2 – Using css grid with one grid item and placing both divs in the same grid cell:

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
}
.clipper,
.container {
   grid-row-start: 1;
   grid-column-start: 1;
}

Another way that doesn’t solve the original problem, but might prevent it occurring most of the time is to use the flexbox sticky footer to ensure the footer is always at the bottom of the page. Your problem might then only occur on short pages on very short viewport heights.

Bloke · 2020-05-05 17:07:56

That’s very clever. I’d never have thought of doing either of those. Thank you!

Textpattern CMS

Textpattern CMS support forum

#1 2020-05-04 15:30:43

Overflow:hidden argh!

#2 2020-05-04 16:53:02

Re: Overflow:hidden argh!

#3 2020-05-05 17:07:56

Re: Overflow:hidden argh!

Board footer