1

I'm trying to (mis)use display:sticky in order to replace the (mis)use of floats in page layout.

I found there's this nice behaviour that aligns a sticky element to the edge of the opposite side no matter how much further you try to push it and I'm exploring how it may be used.

For example, if there's a sibling of unknown height (or even more siblings, floats can only deal with just one), it can be vertically aligned nicely, with something like {position:sticky;bottom:9999px;}.

It works well, but with one side effect: the pushed element still takes its original space at the bottom, adding its own height to the height of the wrapper and thus pushing everything else lower.

.wrapper {
  border:1px dashed black;
  width:500px;
  }
.main {
  background:#eee;
  width:300px;
  margin-left:200px;
  }
.aside {
  background:#aaa;
  width:200px;
  position:sticky;
  bottom:9999px;
  }
<div class="wrapper">

<div class="main">
there is some stuff of unknown height.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>
</div>

<div class="main">
and there some more.<br/>.<br/>.<br/>.<br/>
</div>

<div class="aside">
this goes nicely to the top without float or absolute positioning // but still occupies it's spot at the bottom &darr;&darr;&darr;
</div>

</div>

I want to get rid of that space, but:

  • with pure css / no extra markup
  • no position:absolute / would be even worse than floats
  • no display:grid / it's overkill until masonry is supported, it would need extra js in the overall context.

I tried with a negative bottom margin, but it doesn't work, no matter how high I set it. Neither does hiding the overflow of either the element or the wrapper. Also, couldn't find anything in the dom inspector hinting to what generates it, but maybe I didn't know where to look.

Wouldn' be surprised that it's either not possible at all or it's just stupid simple.

lucian
  • 623
  • 10
  • 21
  • 1
    "*no `display: grid` / it's overkill*" - a specified layout option is "*overkill*" as opposed to the weird abuse of `position: sticky`? – David Thomas Dec 31 '21 at 17:15
  • Wouldn't flexbox do that? https://codepen.io/Paulie-D/pen/eYGMZLw – Paulie_D Dec 31 '21 at 17:16
  • @DavidThomas Browser compatibility is still an issue (not necessarily because of volumes, but of certain bosses), and it's also hard to justify such a change to improve on something that technically already works (the historical weird abuse of `float:left`). – lucian Dec 31 '21 at 17:34
  • @Paulie_D Flexbox works for this example indeed, but as soon as you start to add more elements ("[...] or even more siblings [...]"), it becomes unwiedly. If I were to go this way, I'd indeed rather choose grid. – lucian Dec 31 '21 at 17:34
  • Depends on what you are actually trying to do. Obviously flexbox works. If you have a more complex problem then ask *that*. Adding complexity **after** asking a question is not appropriate here. – Paulie_D Dec 31 '21 at 17:36
  • @Paulie_D True, I should have added the "more siblings" I mentinoned in the paranthesis in the code snippet, sorry about this. – lucian Dec 31 '21 at 17:38
  • Well now you either change the HTML or use CSS-Grid....nothing wrong with either. Css-Grid is NOT overkill, it's no more complex than flexbox and less that abusing position sticky. https://codepen.io/Paulie-D/pen/WNZzxvP – Paulie_D Dec 31 '21 at 17:55
  • @Paulie_D No more complex only until you hit its own limitations, such as https://stackoverflow.com/questions/42689566/css-grid-how-to-bring-elements-in-same-grid-area-to-line-up – lucian Dec 31 '21 at 19:17
  • Still not sure what you are after BUT this sounds like a Masonry issue. https://stackoverflow.com/questions/44377343/css-only-masonry-layout – Paulie_D Dec 31 '21 at 19:19
  • @Paulie_D Indeed. That's when it becomes overkill – close to no support without js. Floats were an easy fix. This would be a better, more useful easy fix if it were possible. – lucian Dec 31 '21 at 19:26
  • 1
    It's coming, Firefox now supports Masonry in CSS-Grid - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout – Paulie_D Dec 31 '21 at 19:31

0 Answers0