reonanaensise
New Member
I have an project that includes 3 divs to be layered on top of each other using the z index in css, but when I apply that to the three and adjust the top positioning, theres a big empty space left where the two other div were previously. Anyone come across this and figured out how to resolve it? Heres the html\[code\]<div id="kit" data-role="page" data-theme="a"> <div data-role="header"> <h1>HI 9829 Kit</h1> </div> <div class="kit edgeLoad-EDGE-1809939789" style="margin: auto;"></div> <div class="container edgeLoad-EDGE-1809939789"></div> <div class="buttons edgeLoad-EDGE-1809939789"> <a href="http://stackoverflow.com/questions/14586102/#a1" class="dot edgeLoad-EDGE-1809939789" style="top: 138px; left: 28px"></a> <a href="http://stackoverflow.com/questions/14586102/#a18" class="dot edgeLoad-EDGE-1809939789" style="top: 45px; left: 261px"></a> </div> <div data-role="footer" data-position="fixed"> <h3>?2013</h3> </div> </div>\[/code\]and heres the css\[code\]#kit .kit{ width:700px; height:670px; background-image:url(../img/9829-Kit_2.png); z-index:1;} #kit .buttons{ position: relative; margin: auto; height: 670px; width: 700px; z-index:3;}#kit .container { position: relative; margin: auto; background-image: url(../img/9829-Kit.png); background-repeat: no-repeat; height: 670px; width: 700px; z-index:2;}\[/code\]the live site is mikehartington.businesscatalyst.com/tablet/