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.