Last post Dec 29, 2020 03:04 AM by shaili shah
Dec 23, 2020 10:47 AM|TW88|LINK
there is DIV in row 1 with height 300px
row 1 and row 2 are overlapped on screen. How to solve it? thanks.
Dec 23, 2020 11:03 AM|PatriceSc|LINK
Could it be that you are using
CSS Layout - The position Property (w3schools.com) rather than letting them flow one after the other?
Debugging CSS - Learn web development | MDN (mozilla.org) to inspect and activate/deactivate styles to confirm if it is caused by a position or some other unexpected CSS style.
Edit: you are just changing the "display" style? When something that should work quite out of the box doesn't, it's a bit hard to be sure which problem was introduced without seeing your code. You could consider:
- using a simplified versino for example at JSFiddle - Code Playground to understand what is done wrong
- if not you have something to show others
In particular when showing code you'll get likely more help if you took care of narrowing what matters to show just that,rather than just just showing your full markup and style and asking others to ignore all irrelevant stuff.
Dec 29, 2020 03:04 AM|shaili shah|LINK
Hey, Good Morning.
First, hide the first div tag as you want using the "display: none" style.
And use the hide and show method to display that div tag.
I have written the code on fiddle just check it out here:
If you don't want two methods then you can hide and show using just one method "toggle" on just one button click.
I have also written the code for it which is commented in the fiddle you can check it.
Hope you find your answer.