htmlcss

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

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.

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

Solution

  • 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.