Streaming live at 10am (PST)

Section Floating


Someone help me understand this:

I have 2 sections on a page.

The first is set to 100vh.

The second is set to auto.

In the browser, when you resize it, the bottom section floats upwards into the 1st section.

(pardon the design i’m experimenting and using outlines & blocks of color to help me understand how things are being laid out)

Here is my public share link: LINK
(how to access public share link)

Section 1 loads, fullscreen since its at 100vh. I scroll down in the browser, bringing section 2 into view - when the browser is resized, section 2 will stay in view, floating upwards along with the movement of the browser, covering up section 1.

I want section 1 to load fullscreen > section 2 to stay in place and not move up and coverup section 1 if the browser is resized. I’m not getting a fix for this.

i’m starting to think that i’m confusing something browser specific, that i can drag and resize a browser window, with the way a device would load the page. ugggghhhh, why do i do this.


Hey Ariel, the second section is not flowing into the section but rather the content from the first section is overflowing into the second on smaller desktop screens. See below pic after inspection with dev tools;

This is happening because the elements that are inside the first section collectively take up space more than 100vh.

Solution: Instead of setting 100vh to the height of the first section, set it to the minimum height. This way if elements take up more than that height, then it will expand accordingly.


Thank you for replying to this - I’m going to try it - ! Thank you :slight_smile:

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.