Overflow text box adds white space on bottom of page - html

Question

I'm not really sure how to explain this, as I'm still new to coding, but I am attempting to make a profile layout for HEX, and I keep having this issue come up on every one I make:
I noticed that when I edit my scrollbox, the white space changes its size accordingly. The bigger the scroll box, the bigger the space and vice versa. Here's the code to my last profile:
body {
background-image: url(http://i.imgur.com/X3qmTN2.png);
background-repeat: no-repeat;
background-attachment: scroll;
height: 100px;
padding-bottom: 0;
font-family: Arial, sans-serif;
color: #e80812;
text-alignment: justify;
}
#nav {
width: 400px;
line-height: 80px;
padding-top: 670px;
}
#nav a:link, #nav a:visited, #nav a:active {
display: block;
font: 14px "arial";
text-transform: uppercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
color: #ab4860;
padding: 7px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#nav a:hover {
letter-spacing: 5px;
color: #74194e;
padding: 7px 2px;
}
.hex {
position: relative;
top: 600px;
left: 100px;
background-color: transparent;
text-align: center;
}
.owl {
position: relative;
top: 800px;
left: 100px;
background-color: transparent;
text-align: center;
}
.club {
position: relative;
top: 1000px;
left: 100px;
background-color: transparent;
text-align: center;
}
b { color: #ab4860; }
u { color: #ab4860; }
i { color: #ab4860; }
<div id="nav">
<div class="hex">Back to HEX</div><br>
<div class="owl">Owl Me</div><br>
<div class="club">Club Rainbow Brigade</div><br>
</div>
<div align="left">
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
</body>
Is there something I need to add, or remove in my code? Did I mess up somewhere and I can't see it?

Answer 1

I edit your code and get a working solution:
html, body {
margin:0;
padding:0;
}
body {
background-image:url(http://i.imgur.com/X3qmTN2.png);
background-repeat: no-repeat;
color:#e80812;
font-family:arial, sans-serif;
height:1660px;
text-align: justify;
width:1300px;
}
#nav {
line-height:80px;
position:absolute;
top:640px;
width:400px;
}
#nav a:link,
#nav a:visited,
#nav a:active {
color: #ab4860;
display: block;
font-family:arial;
font-size:14px;
letter-spacing:2px;
padding:7px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
transition:all .5s ease-out;
}
#nav a:hover {
color:#74194e;
letter-spacing:5px;
padding:7px 2px;
}
.hex {
position:relative;
text-align:center;
}
.owl {
position:relative;
text-align:center;
top:15px;
}
.club {
position: relative;
text-align: center;
top:30px;
}
.content {
height:850px;
left:390px;
overflow:auto;
position:absolute;
top:640px;
width:910px;
}
b, u, i {
color: #ab4860;
}
<div id="nav">
<div class="hex">Back to HEX</div>
<div class="owl">Owl Me</div>
<div class="club">Club Rainbow Brigade</div>
</div>
<div align="left">
<div class="content">Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
</div>
There was some typos in your HTML and CSS code. I solved this and do some changes to place all the elements to the right place.
A working fiddle you can find here: http://jsfiddle.net/hhf2kpLd/

Answer 2

The BR tags were your downfall, I've changed a few other things too.
<div id="nav">
<div class="hex">Back to HEX</div>
<div class="owl">Owl Me</div>
<div class="club">Club Rainbow Brigade</div>
</div>
http://jsfiddle.net/link2twenty/xxvkzz28/

Answer 3

The div
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
Makes your content to be out of the delimited area of your html content. Use your Browser Inspector to see it. I think that some browsers will interpret your code in a different way and the result will be different (with some blank space for example).
Can you first upload your img on another site (like casimage.com) cause it's lock on my side (proxy limitation) ? And then you should structure your site on a different way, with no relative or absolute position.

Answer 4

I made some changes to your code, by this mode the menu's texts are positioned in his place. Top and left are 0 pixels. See the snippet in fullpage:
body {
background-image: url(http://i.imgur.com/X3qmTN2.png);
background-repeat: no-repeat;
background-attachment: scroll;
height: 100px;
padding-bottom: 0;
font-family: Arial, sans-serif;
color: #e80812;
/* text-alignment doesnt exists, it's text align*/
text-align: justify;
}
#nav {
width: 400px;
line-height: 80px;
padding-top: 670px;
}
#nav a:link, #nav a:visited, #nav a:active {
display: block;
font: 14px "arial";
text-transform: uppercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
color: #ab4860;
padding: 7px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#nav a:hover {
letter-spacing: 5px;
color: #74194e;
padding: 7px 2px;
}
.hex {
position: relative;
top: 0;
left: 0;
background-color: transparent;
text-align: center;
}
.owl {
position: relative;
top: 0;
left: 0;
background-color: transparent;
text-align: center;
}
.club {
position: relative;
top: 0;
left: 0;
background-color: transparent;
text-align: center;
}
b { color: #ab4860; }
u { color: #ab4860; }
i { color: #ab4860; }
<div id="nav">
<div class="hex">Back to HEX</div><br>
<div class="owl">Owl Me</div><br>
<div class="club">Club Rainbow Brigade</div><br>
</div>
<div align="left">
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>