Streaming live at 10am (PST)

Vertical divider length


#1

Share link: https://preview.webflow.com/preview/vum?preview=b1cd38c2d6e11fdd4bde4d5e85d260ae

I cannot figure out how to make the border between two columns change its height according to the longer column. What I mean is this:

(1)

- here the border dividing the two columns is set on the left column and some of the FAQ questions had been clicked to show and the left column is longer than the right one as a result, and everything looks all right

(2)

- some FAQ questions have been clicked to hide show and the left column is shorter than the right one as a result, and now the border does not reach the bottom.

How could this be resolved?


#2

Hello @uzzer

I would make that columns fixed size, enough for see "inside-element " with open state. It will still let elements change inside, but line in between will have stable height


#3

But with that fixed height (max height I guess?) would it shrink back when a question is clicked to hide and then increase its length when a question is shown? (that is, is it going to be "dynamic" if this is the correct term?)


#4

If you will make column height in px - it will be fixed size, it will not shrink back.

If you want it shrink:
-make right column height in px,
-make left column min-height same as right column size (in px)
-make left column height - auto


#5

Thanks! I see CSS is not really that great at some things... coming back to the ancient debate of tables vs CSS, this would have been achieved with no hassle with a table..


#6

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