Jump to content

Designing variable height container div


fontanasteve

Recommended Posts

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;
}

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...