The @mootari’s notebook: https://observablehq.com/@mootari/fullscreen-layout-demo is currently broken. I imagine something has changed recently in the Observable’s DOM.
Thanks for pointing it out! Can you please check the update I just published?
- cell divs now have an additional wrapper below
height: 100%on the wrapper would no longer work and needed to be specified as
Thanks ! I fixed my notebook as well: https://observablehq.com/@severo/two-columns-layout-in-fullscreen-mode
I would advise against using
float for columns. These days there are far better options, like
display:grid. Also, at least in my browser, the cell containing the “Side column” headline appear below the videos.
Oh, you’re right, the
breakLayoutAtCell parameter was wrong
For the layout, with my poor CSS skills I couldn’t find a better way of getting what I want, and I had no more luck asking on StackOverflow: https://stackoverflow.com/questions/60773748/css-layout-how-to-break-the-first-column-after-n-elements-and-follow-in-the-se.
It can be quite tricky to flow elements across columns without additional wrappers. For what it’s worth:
display:inline-block can often be easier to handle.