web page elements overlapping each other even when using percentage values in css

Question

I have a page with structure like this. I want to divide the page into 6 sections so I have made 6 outer divs.

Answer 1

You can try this css code to fix that

section{
    position: relative;
    height: 100%;
}