tommybfisher Posted August 7, 2011 Share Posted August 7, 2011 Hi. My page consists of a 1000px wide wrapper with all content contained inside. With the current CSS code, the wrapper stretches to the bottom of the screen if the content is less than the screen height. The problem is, that if the contents continue past the height of the screen, the wrapper will still continue behind the content, but stop maybe 10px from the bottom. I want the wrapper to continue to the very bottom on all pages. I can't figure out from my code what might be causing this. The site is pieced together from php includes, but I don't think that could affect this. I wondered if the #wrapper:after div might be affecting this, but no change with this problem after commenting it out. Any ideas? CSS * { margin: 0px; padding: 0px; text-decoration: none; } html { min-height: 100%; } body { background-image: url(../images/background.jpg); background-repeat: repeat; min-height: 100%; padding: 0px; margin: 0px; } #wrapper { width: 1000px; background-color: #333333; min-height: 100%; margin: 0px auto; } /* to fix floated elements to allow wrapper to continue down behind them */ #wrapper:after { clear: both; content: "."; display: block; height: 0px; visibility: hidden; } HTML structure (I've cut out the irrelevant parts) <html> <head> </head> <body> <div id="wrapper"> <div class="mainbody"> /*content*/ </div> /*close mainbody*/ </div> /*close wrapper*/ </body> </html> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted August 7, 2011 Share Posted August 7, 2011 I am almost 99% sure the content: "."; is causing this. there are nicer ways in my opinion to allow the container to shrinkwrap around the inner elements that are floated. Besides that the problem with using the content property is that firebug won't see it, besides that I don't like it because css should not add content, it should style it. but that is just my opinion. Also I am very curious why you use min-height on your html and body tag and not height, i can't inmagine #wrapper would know what to do with that since it's not a reference Quote Link to comment Share on other sites More sharing options...
tommybfisher Posted August 7, 2011 Author Share Posted August 7, 2011 Thanks for your response. The height on body and html weren't originally min-height. That was just me trying anything to get it to work (desperation!). Regarding shrink-wrapping div elements, I did search online for a while to try to find how to do it and this method seemed all I could find. I do agree that css should be for style only. Do you know of any good tutorials on this issue as I need the wrapper to continue behind the floats. Many thanks Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted August 7, 2011 Share Posted August 7, 2011 Hi mate, it depends a bit on the situation. there are 2 flavours + yours which i think is thought up by stubbornella (some css chick ) but i am not sure about that. Anyway i don't use that content thing, for reasons already mentioned. The one I use most is the one that uses overflow:hidden on a wrapper that has no defined height, which i like most since we almost never know what the height will be. The other works by adding an extra element to the mark up with the property of clear:both; Run the code below and you will see what i mean and how it works. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> /* some default stuff which they all have in common */ #wrapper0,#wrapper1,#wrapper2{width:1000px; background:yellowgreen; margin:0 auto;} .left, .right{height:150px;width:498px;border:1px solid #333;float:left} /* fixing the floats */ #wrapper1{ overflow:hidden; /* this does the shrink wrap magic */ clear:both; /* otherwise it will end up at the right hand side of #wrapper0 , normally not needed for a outer wrapper*/ } .clear{clear:both;} </style> </head> <body> <div id="wrapper0"> <div class="left">left</div> <div class="right"> <p>wrapper0 doesn't shrink wrap due to the floaters, if it would a background color would show up.</p> </div> </div> <div id="wrapper1"> <div class="left">left</div> <div class="right"> <p>wrapper1 does shrink wrap despite to the floaters, since no height is given to the div, overflow hidden, won't hide anything, but magically shrink wrap around the floated elements </p> </div> </div> <div id="wrapper2"> <div class="left">left</div> <div class="right"> <p>wrapper2 does shrink wrap despite to the floaters, because an extra element is added at the bottom with the property clear. I used a break for it because it makes sense i find. </p> </div> <br class="clear" /> </div> </body> </html> happy coding! Quote Link to comment Share on other sites More sharing options...
tommybfisher Posted August 7, 2011 Author Share Posted August 7, 2011 Got it! Thanks! The best thing is I understand how this one works (I couldn't get my head around how the original way worked). Thanks for the clear explanation. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted August 7, 2011 Share Posted August 7, 2011 your more than welcome tommy! if you end up having troubles let me know Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.