fontanasteve Posted January 15, 2009 Report Share Posted January 15, 2009 What I am trying to achieve (and I?m sure it?s not the Holy Grail of web design) is for a container div that will expand in height in response to content within the child divs on the page. So if there is a lot of text on a page in the text div, the container will expand in height to accommodate this. Likewise, if there is not much text, there shouldn?t be a huge gap between the end of the text and the bottom of the page. I also have a footer div that will be used for W3C and designer logos as well as details of the last update for the site. The footer div needs to remain at 10px from the bottom of the container. Previously I have had to resort to having different CSS files for different page lengths, and whilst this works, I would rather that it be dynamic as opposed to duplicating style sheets for this purpose. CSS code attached plus a graphic representation of what I am trying to achieve. In order to position the container in the centre of the user?s browser, I am using position:relative; margin:auto; I have searched in Google to see if anyone else has addressed this topic but cannot find anything specific although I have picked up a few hints and tips, such as setting height with html, body {height:100%} which does make a bit of a difference as if there is a lot of content, the container div does stretch. But when there is less content, there is a lot of blank space between the end of the content and the footer. I have also tried searching the forums here but haven?t had any hits on the terms that I am using. Can anyone help? Many thanks in advance. PC running Windows XP with Dreamweaver CS3. @charset "utf-8"; html, body {height:100%} body { background-image:url(../images/background.jpg) } #container { position:relative; width:900px; height:140%; z-index:1; margin:auto; background-color: #FFFFCC; font-family: Verdana; font-size: 14px; color: #000066; border: medium outset #000066; } #navigation { position:absolute; left:50px; top:100px; width:800px; height:50px; z-index:2; } #banner { position: absolute; height: 100px; width: 900px; } #text { position:absolute; left:50px; top:190px; width:800px; height:600px; z-index:4; } #footer { position:absolute; left:15px; width:870px; height:35px; z-index:5; bottom: 10px; } .h1 { font-family: Verdana; font-size: 24px; color: #000066; text-align: center; font-weight: bold; } #harmonylogo { position:absolute; width:100px; height:35px; z-index:1; right: 10px; bottom: 10px; } #checkincal { position:absolute; left:200px; top:270px; width:240px; height:150px; z-index:1; } #checkoutcal { position:absolute; left:595px; top:270px; width:240px; height:150px; z-index:2; } .footer { font-family: Verdana; font-size: 10px; font-weight: bold; color: #000066; } Quote Link to comment Share on other sites More sharing options...
fontanasteve Posted January 15, 2009 Author Report Share Posted January 15, 2009 OK, I couldn't get the image to attach! Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 15, 2009 Report Share Posted January 15, 2009 You have to upload it somewhere and then link to it. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 15, 2009 Report Share Posted January 15, 2009 What you seem to want is a "sticky footer" page. There seem to be two main types which don't need javascript:- 1. The footer sticks to the bottom of any viewport resolution and if the page content is longer, it is accessed by a vertical scrollbar and it comes up behind the fixed footer, so the footer is always visible. 2. The footer is fixed to the bottom of the viewport only when there is not much content on the page, so there is a space between content and footer, but when the viewport is made less high or the content is more, the footer stays below the content and comes into view with scrolling. I don't think you have have it combining both. See http://w'>http://w ww.visibility inherit.com/tools.php the 100% height with sticky footer and some of the three column layouts and http://w ww.wick ham43.net/headerfooterfix.php (delete spaces in urls). Quote Link to comment Share on other sites More sharing options...
fontanasteve Posted January 15, 2009 Author Report Share Posted January 15, 2009 Hi Wickham, Many thanks for the speedy response. I believe that it is the second example that I am looking to achieve and I have set the footer to be positioned from the bottom of the container and so it does stay where I want it to. So far so good! However, what I am still having difficulty with is getting the container to expand and shrink around the content in the child divs. I've played around with the container div height, setting to auto means we see nothing, setting to 100% doesn't stretch when more content is added, setting to 140% displays beautifully when there is a lot of text but when there is not much, there is a great big gap between the end of the content in the text div and the footer (a yawning chasm). Do I need to be looking at min & max heights? http://www.fontanadesign.co.uk/harmony/location.html Thanks again Steve Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 15, 2009 Report Share Posted January 15, 2009 (edited) The second type of sticky footer is item 1b on my link above, which leads here:- http://ww w.wickham43.net/footerfix.php You will see from the source code that the footer is OUTSIDE the container to be independent of it; while the container has min-height: 100%. The footer has a negative top margin to drag it back over the bottom of the container which has a space at the bottom as described next. There has to be a clearfooter div (empty) with the same height as the footer at the bottom of the container so that the footer doesn't overlap the content of the container if the window height is too small for everything. So in normal circumstances the container uses 100% of the height, the footer would be below it out of sight but is dragged back up by the negative margin-top into view. If the container uses more than the 100% height the footer just sits below it as normal. Edited January 15, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
pooch Posted February 8, 2010 Report Share Posted February 8, 2010 Wickham, I have a similar problem (in a way). I have the footer displaying correctly, but the problem is with my wrapper/container div. I have 2 divs, one on left with variable height content and one on right which is fixed height. Sometimes left div is longer than right div and sometimes it isnt. The problem is that the wrapper div that goes around these 2 divs does not display properly when trying to use height of either 'auto' or '100%'. The wrapper div just doesn't show. If I choose a specific height for the wrapper div it displays like I would like it to, but I need the length variable in case left div becomes large. Any suggestions welcome. Thanks. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted February 8, 2010 Report Share Posted February 8, 2010 I'm guessing you probably need height 100% on the HTML and body. Here is everything you need for it to work in all... http://www.visibilityinherit.com/code/sticky-footer.php Quote Link to comment Share on other sites More sharing options...
pooch Posted February 9, 2010 Report Share Posted February 9, 2010 Eric, Thanks for your assistance. Certainly has helped with some of the things I was doing. I've still messed some other things up but it is looking better. Much appreciated. Quote Link to comment Share on other sites More sharing options...
administrator Posted February 9, 2010 Report Share Posted February 9, 2010 Have you seen this: http://www.killersites.com/blog/2006/matching-div-heigths/ Stefan 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.
Note: Your post will require moderator approval before it will be visible.