Streaming live at 10am (PST)

CSS / Webflow Question


#1

How to implement this in Webflow.

I'm not really sure how to ask this question.

How can you setup div-3... so that it automatically repositions itself
it when div-2 changes in height as described below:

Assume... 3 DIVs (div-1, div-2, div-3)... all 100% width.

div-1 is fixed-top, height: 60px
div-2 is fixed-top, top-margin: 60px, no height set
- however, height is approximately 46px
- div-2.height only shown here for reference

this places div-2 directly under div-1.

div-3... position: relative, top-margin: 106px

This places div-3... visually below div-2.

THE PROBLEM ... assuming there is text in div-2... if you resize the screen so that the text in div-2 wraps...
- the height of div-2 will grow to allow the wrapped text.

When this happens...
- div-2 will overlap div-3
- because div-3.top-margin is preset
- to the height of div-1 (which doesn't change) + the height of div-2 with a single line of text.

If you have text in div-3 (near the top)... it can be covered up by div-2 as the text in div-2 wraps.


#2

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