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.