Hey there Slashy,
I took a look at the page in Firefox, Chrome, and even IE11 on Windows 7, but I couldn't find the white space you mentioned. It might be worth trying to clear your browser cache to see if that helps.
Here are a few other things to keep in mind:
- When using
position: absolute;, remember that it is relative to the parent container. You may want to consider using position: fixed; instead, which uses the browser window as the reference point.
- Try using
padding-bottom on the body rather than margin-bottom.
- Consider including
box-sizing: border-box; in your CSS to ensure that padding doesn't add to the total width when set to 100%.
Remember, when absolutely positioning elements, you need to define the parent's position if you want the child element to be positioned relative to it. Here's an example of positioning a div at the top right corner:
<body>
<div class="parent">
<div class="child">This content goes in the top right</div>
<p>Parent content here</p>
</div>
</body>
And the corresponding CSS:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0px;
right: 0px;
}
If you don't specify position: relative; on the parent element, the absolutely positioned child will be based on the body.
Absolutely positioning elements can be tricky at first, but I hope this explanation clears things up for you!