CSS / Webflow Question

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.

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