I am relatively new to html.
This is a simplified version of my code.
I want it so that I can scroll down to view the rest of the page, but I cannot do that. Any help would be very appreciated.
The problem is that all your elements are set to
position: fixed which sets them independent from the flow of the document. As such, your
<body> has no height and you cannot scroll.
position: fixed and give your elements a static height instead (e.g in
px instead of
I've done these adjustments here: https://jsfiddle.net/sgqkkwb5/2/ but you'd still need to change other layout properties to get the result you want.
Off-topic (opinion): Since you seem quite new to html and css, creating your own layout is good for learning purposes - however, if you are creating a public project of some sort I would suggest resorting to a grid system. Have a look at http://getbootstrap.com and specifically the grid section.