Hi friends,
For some reason my footer had some extra space at the bottom, i tried to push it down with the position: absolute, but now its in the middle of the page. could you maybe take a look at my code and help me with the problem?
here is my git:
Where the CSS file? This is just a readme file in the repo.
Hello:) I am so sorry, completely forgot to merge it. Can you see the files now?
yep. all files are there.
I’m a bit rusty, but what about trying(?):
#footer {
position:fixed;
bottom:0;
width: 100;
}
Maybe verify here:
Thank you<3 your solution works perfectly. However, when its fixed you can always see it. Is it possible to put it on the bottom so you see it when you scroll all the way down?
I’m not certain. Maybe check the docs and play around with the code.
try:
#footer {
position: absolute; #or sticky?
bottom: 0;
}
maybe check here too.
Or, maybe @toastedpitabread knows. 
Hi, there!
When an element is positioned relatively, it is not removed from the flow of the document, and other elements are not affected by its new position. So, while <main> is shifted down 5rem, the footer is not. The space below the footer is the bottom 2rem of <main>.
The easiest solution would be to use margin-top: 5rem; on <main> instead of relative positioning. You could also use position: sticky; on <header> with top: 0; Then you could remove relative positioning from <main> and still get the same effect.
There are many more solutions, but the two I mentioned are pretty standard.
I decided to create a visual for you as well. Here there are three <div> without any positioning applied.
And here are the same three <div> with the blue one having
.blue {
position: relative;
bottom: 3rem;
}
The blue <div> shifted up, but the bottom red one did not because the “space” of the blue one remains in the design.
Hello
Something I like to include in my debugging toolbox, is ensuring my HTML is valid and there aren’t any mistakes there, before moving onto debugging from a CSS point of view.
It’s VERY easy to miss when you’ve been staring at your own code for so long, and fresh eyes can easily spot it, but I can see in your footer mark up, you have an extra closing div on line 118 that is not needed. This may not fix all of your positioning problems but sometimes things like this can throw a layout off.
It will need to be removed in order for your HTML to be valid anway.
You can also check your HTML is valid by using this site The W3C Markup Validation Service. If you select Validate By Input, you can just paste in your raw HTML.
It was also a good option. Thank you so much, really appreciate it<3
1 Like
You are the best!!! Thank you so much for such a clear explanation, it solved everything<3
1 Like
Also, do you maybe know why my text in the About Me section is under the image and not on the right side? I tried so many things including different flex methods but its either on the bottom or on the right side, but when the image ends, it still doesnt wrap it and stays in the same column:(
Its a very good point! Completely missed the extra closing div. Much appreciated<3 Also, if you have any critique or comments, i would be happy to hear it^^
1 Like
Yes.
flex-wrap: wrap; allows flexed items to break onto a new line when they begin to overflow their parent container.
Block level elements, such as the <p> tag, will automatically stretch 100% of its parent container. So, with wrap enabled, the <p> breaks onto a new line to reach 100% width. To adjust when the wrap happens, you can set max-width on the <p> tag so it does not stretch 100%.
For example, this is a max-width of 44ch.
The remaining flex space on the right is the amount of space that can be shrunk before the wrap takes affect.
Thank you so much again!!! You are amazing^^
1 Like