Html body issues

hello i m creating my first restaurant website . i m almost finishing it but i faced a problem . the footer and main and header are nested in the body.
i wanted the footer to be in the bottom of the page . but it s in the bottom of the header and look at the yellow border style of the body which contain only the header and it s supposed to contain the whole page



1 Like

Can’t read your code I’m afraid but it sounds like your footer is either nested in your header or you are using positions fixed or absolute which are causing content to collapse?

i used position absolute in the footer . and for the main and footer i used position relative .for the footer it s absolute . when i use absolute it s meant to positionet it relatively to it s container no ? and the container is the body. the code is too long you will be overwhelmed

or maybe the problem is beacause the main is relative . i should set it to abolute.

well explained:

1 Like

If you wrote your footer at the bottom of your html then it should automatically be at the bottom of the page. There should be no need for positions. Try removing the footer position absolute and see what happens. There should really be no need for any positions for your header, main or footer if you wrote them in order within the html.

1 Like

Using position absolute, fixed takes things out of the normal document flow and causes content collapse. Positions are best used only when there is no easier alternative. Your header main and footer should position themselves without any extra code as long as you write them in order within the html.
In terms of more complicated layouts you should watch a few youtube videos on CSS Grid and Flexbox, these are generally far better and easier to work with than using positions or floats

1 Like

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