I am using two styles in this page:1. fill screen with div.2. make two divs in same height.style:\[code\]*{ margin: 0;}html, body{ height: 100%;}#wrapper{ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -44px; /* -44px being the size of the footer */}#header{ width: 100%; height: 60px; background: #e6e6e6;}#headerPlace{ width: 990px; height: 60px; margin: 0 auto; background: #ddd;}#content{ overflow: hidden; width: 990px; margin: 0 auto;}.content-1{ float: left; margin-right: -1px; /* Thank you IE */ width: 190px; background: #bfb; padding-bottom: 500em; margin-bottom: -500em;}.content-2{ float: right; width: 800px; background: Aqua; padding-bottom: 500em; margin-bottom: -500em;}#footer, #push{ height: 44px;}#push{ width: 990px; margin: 0 auto; background: Aqua;}.content-1-push{ float: left; width: 190px; background: #bfb; position: absolute;}.content-2-push{ float: right; width: 800px; background: Aqua; position: absolute;}#footer{ width: 100%; background: #e6e6e6;}a img{ border: none;}\[/code\]HTML:\[code\]<body> <div id="wrapper"> <div id="header"> <div id="headerPlace"> <a href="http://stackoverflow.com/questions/13806333/Default.aspx"> <img src="http://stackoverflow.com/questions/13806333/siteImages/logo.jpg" class="logo" /> </a> </div> </div> <div id="content"> <div class="content-1"> content-1 </div> <div class="content-2"> content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2 </div> </div> <div id="push"> <div class="content-1-push"> </div> <div class="content-2-push"> </div> </div> </div> <div id="footer"> footer</div></body>\[/code\]now the question is: what should I do for letting the illusion the the "push" div is continuing the "content" div if necessary ?
Make a div fill the remaining screen space and internal divs with same height
- Thread starter Dikesuike
- Start date