D0nK3Y_D0nK D0nK3Y_D0nK - 1 year ago 42
HTML Question

Content goes off screen of my web page and overflow does not work

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.


<div id="header">
<div id="nav">
<div id="ingredient">
<div id="direction">

Answer Source

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.

Remove your 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.

Good luck.