Need help with footer overlapping the sections

HTML-CSS
#1

I have been aligning the sections in one row, after which I found that the footer has overlapped with the sections. I have tried to set the footer’s position relative to the viewport and its ancestor (which is ), but it is still not working.

Can someone explain to me what has happened here and what should I do?

I think it is the adjustments of the sections’ positions that have done that, but I do not know other ways to align the two sections in a row like two cards. I have tried float property, but the #sec2 just floated straight to the bottom of the page (instead of the right of #sec1. So I grouped the two sections in tag, but still didnt work.

Can someone help me with this as well? Thank you

#2

The problem was that you set position: absolute for sec1 and sec2, when use that they will be removed from the normal flow of HTML/CSS, hence the footer overflow.

You can remove #sec1 and #sec2 in CSS and use
article { display: flex; justify-content: space-around; }

Maybe that will do it for you. More info about flexbox for you.

1 Like
#3