caleb7777 Posted January 23, 2010 Share Posted January 23, 2010 Greetings, I am at the end of my rope. I read all the links and did the searching, and read the pages at PIE (position is everything)I cannot get my main container div to expand down if it is overflows with many floating elements.There are 2 footer divs that do not go down because the 'mainbody' containing div does not expand down.Please help.I attached the code as a html basically and have cleared out all I could <!DOCTYPE HTML><!-- Start store_template file --><html><head><style>* {BORDER-BOTTOM: #c2c2c2 1px solid;BORDER-RIGHT: #c2c2c2 1px solid;BORDER-LEFT: #c2c2c2 1px solid;BORDER-TOP: #c2c2c2 1px solid;}.mainbody { min-height: 100%; POSITION: absolute; TOP: 0px; RIGHT: 210px; LEFT: 155px;}.products { align: center; position: absolute; bottom: 210px; top: 120px; width: 100%;}.box { TEXT-ALIGN: center; MARGIN: 5px; WIDTH: 260px; FLOAT: left; HEIGHT: 330px;}.productfooter { bottom:60px; position: absolute; TEXT-ALIGN: center; HEIGHT: 150px; RIGHT: 0px; LEFT: 0px; }.randomimg{height:100px;} .footer { bottom: 0px; POSITION: absolute; TEXT-ALIGN: center; RIGHT: -210px; LEFT: -155px; clear: both;}.spacer{display:block;clear: both;}</style></head><body><div class="mainbody"><div class="products"><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><br></div><div class="productfooter"><font><img class="randomimg" src=http://www.infinityosd.com/images/product/small/comp6.jpg><br> II-book Notebook laptop<br> $ 360.72 <BR> </font></div><div class="footer"><table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td height="23" colspan="3" style="background-image: url('http://www.infinityosd.com/images/template1/base1.jpg')"></td></tr><tr><td height="9" colspan="3" style="background-image: url('http://www.infinityosd.com/images/template1/base2.jpg')"></td></tr><tr><td height="28" colspan="3" style="background-image: url('http://www.infinityosd.com/images/template1/bg_dot.jpg')"><br></td></tr></table></div><div class="spacer"> </div></div><!-- End store_template file --></body></html> You can cut and paste that code into a html file to see my problem.I tried the clear:both div after the elements but it didn't work for me either because it just goes to the top of the page. Link to comment Share on other sites More sharing options...
Ingolme Posted January 23, 2010 Share Posted January 23, 2010 Add overflow: auto; or overflow: none; to the <div>.Floated elements aren't taken into account when the browser calculates the height of a box. But when setting overflow, it considers the boxes, because overflow isolates the content within the box.The other alternative would be to have a <div> after all the rest of the cloated elements with clear: both; on it, but I don't like that method as much because it adds extra content to the page that isn't necessary. Link to comment Share on other sites More sharing options...
caleb7777 Posted January 23, 2010 Author Share Posted January 23, 2010 I already have a cleared div in there, it wouldn't work. I tried overflow none in the "box", "mainbody", and in "products". didn't work. Link to comment Share on other sites More sharing options...
caleb7777 Posted January 24, 2010 Author Share Posted January 24, 2010 The problem was that a div was positioned absolutely, then the remaining divs don't fall below it.I found a few problems, the clear:both spacer div would not work because it was below an absolutely positioned div and therefore did not 'fall' below the div in the page layout. I removed the 'products' div entirely.Once that worked it was good for large pages if I set the footer elements to bottom:-60px; and bottom:-210px; so that they appeared below main content but bad for small content pages because with 'mainbody' div set to min-height:100% the footer would appear below the visible area and out of view. So I realized the easy fix there was to make the spacer div as tall as my footer. height:210px; on the spacer div and boom! footer always at bottom 0px; but well below any floated elements in the div above it. Perfect expanding page with footer layout.Here it is done: <!DOCTYPE HTML><html><head><style>* {BORDER-BOTTOM: #c2c2c2 1px solid;BORDER-RIGHT: #c2c2c2 1px solid;BORDER-LEFT: #c2c2c2 1px solid;BORDER-TOP: #c2c2c2 1px solid;}.mainbody {overflow: none;min-height: 100%;POSITION: absolute;TOP: 0px;RIGHT: 210px;LEFT: 155px;}.box {TEXT-ALIGN: center;MARGIN: 5px;WIDTH: 260px;FLOAT: left;HEIGHT: 330px;}.productfooter {position:absolute;bottom: 60px;TEXT-ALIGN: center;HEIGHT: 150px;RIGHT: 0px;LEFT: 0px;}.randomimg{height:100px;}.footer {position:absolute;bottom: 0px;TEXT-ALIGN: center;RIGHT: -210px;LEFT: -155px;}.spacer{height:210px;display:block;clear: both;}</style></head><body><div class="mainbody"><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><div class="box"><img src="http://www.infinityosd.com/images/product/small/W8LDB.jpg"></div><br><div class="spacer"> </div><div class="productfooter"><font><img class="randomimg" src=http://www.infinityosd.com/images/product/small/comp6.jpg><br>II-book Notebook laptop<br>$ 360.72<BR></font></div><div class="footer"><table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td height="23" colspan="3" style="background-image: url('http://www.infinityosd.com/images/template1/base1.jpg')"></td></tr><tr><td height="9" colspan="3" style="background-image: url('http://www.infinityosd.com/images/template1/base2.jpg')"></td></tr><tr><td height="28" colspan="3" style="background-image: url('http://www.infinityosd.com/images/template1/bg_dot.jpg')"><br></td></tr></table></div></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.