I created a website which you can view here.
Check out the code below:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1><a href="#"></a></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
hello
</div>
</div>
The CSS for this layout can be found in the jsfiddle link provided above. The issue I am facing is that only the body of the website is scrollable, not the header and footer. This is causing me to not see the footer. How can I go about fixing this problem?
For optimal viewing, expand the output window on jsfiddle