I have a twitter/facebook like header, a fixed one and a main content. When I would scroll down to my last line, the content div is overlapping the header. How can I avoid this?this is the screenshot of my page:
This is the structure of my html:\[code\]<body><div><?php include("initcontrols/header.php"); echo $plHeader;?> </div><div id="mainform"><noscript>It seems your browser doesn't support Javascript.<br /></noscript><!-- Apply blue theme as default for all tiles --><div id="tiles" class="blue"><!-- Sliding Tile that shows 100% of the back tile every 3 seconds --><div class="live-tile" data-stops="100%" data-speed="750" data-delay="3000"> <span class="tile-title">slide tile (figure 2a)</span> <div><img src="http://stackoverflow.com/questions/13805033/images/say.jpg" width="180" height="180" alt="1" /></div> <div><img src="http://stackoverflow.com/questions/13805033/images/sayako.jpg" width="180" height="180" alt="2" /></div></div> <!-- Red Flip Tile that flips every 4 seconds --><div class="red live-tile" data-mode="flip" data-delay="4000"> <div> <img src="http://stackoverflow.com/questions/13805033/images/home.png" alt="3" /> <a class="tile-title">flip tile front (figure 2b)</a> </div> <div> <img src="http://stackoverflow.com/questions/13805033/images/message.png" alt="4" /> <a class="tile-title">flip tile back (figure 2b)</a> </div></div><script type="text/javascript">// apply regular slide universally unless .exclude class is applied // NOTE: The default options for each liveTile are being pulled from the 'data-' attributes$(".live-tile, .flip-list").not(".exclude").liveTile();</script></div>\[/code\]My css:\[code\]div#header{padding-left:15px;overflow:hidden;position: fixed;margin:0px;top:0px;left:0px;display: block;width: 100%;height: 90px;-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);background:#333333;background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;}div#header-title{color: #FFF;float: left;display:inline-block;}div#header h2{margin: 0 0 0 3px;z-index:12;}div#header h1{margin-top:0;margin-bottom:0;}#mainform{width:960px;background: #F0F0F0;border: 1px solid #CCC;height: 2000px;margin: 100px auto;}\[/code\]and for my live-tile look:http://pastebin.com/cpBXYVRuI used a template by http://www.drewgreenwell.com/projects/metrojs#applicationBar: