Text boxes overlapping on browser resize

I have two text boxes that resize correctly in terms of width when I resize the browser. The problem is that they end up overlapping instead of the top text box pushing the bottom text box down. To get the text boxes to dynamically change width and height, I added the css style to the text box. Could someone please help me dynamically move the bottom textbox up and down depending on the bottom edge of the top textbox.

Textbox Test.zip (37.6 KB)

Have a look at the flexible layout. Experiment with that and you will learn a lot :slight_smile:

Textbox Test-2.hype.zip (24.6 KB)


It looks like your example is exactly the same as the OP’s example :slight_smile:

oops, I misunderstood what he was asking. no solution from me then. sorry for that.

no worries. But, @jlee462 you could also add layouts that change at a certain px width therefore manually moving the text boxes so that they don’t overlap.

So, a combination of responsive and flexible will probably get you close to what you want.

There are possibilities of using javascript to calculate the height / width of the screen “onresize” and adjusting elements according to this but this is pretty advanced. For simplicity I would go the layout / flexible route.