Jump to content


Photo

Designing variable height container div


  • Please log in to reply
9 replies to this topic

#1 fontanasteve

fontanasteve

    New member

  • New Members
  • 3 posts

Posted 15 January 2009 - 10:54 AM

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

  • 0

#2 fontanasteve

fontanasteve

    New member

  • New Members
  • 3 posts

Posted 15 January 2009 - 10:57 AM

OK, I couldn't get the image to attach!
  • 0

#3 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,730 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 15 January 2009 - 11:21 AM

You have to upload it somewhere and then link to it.
  • 0

#4 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 15 January 2009 - 11:36 AM

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

#5 fontanasteve

fontanasteve

    New member

  • New Members
  • 3 posts

Posted 15 January 2009 - 12:35 PM

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.fontanade...y/location.html

Thanks again

Steve
  • 0

#6 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 15 January 2009 - 02:21 PM

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, 15 January 2009 - 02:23 PM.

  • 0

#7 pooch

pooch

    New member

  • New Members
  • 2 posts

Posted 08 February 2010 - 12:30 PM

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.
  • 0

#8 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 08 February 2010 - 12:41 PM

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.visibilit...icky-footer.php
  • 0

#9 pooch

pooch

    New member

  • New Members
  • 2 posts

Posted 09 February 2010 - 09:46 AM

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.
  • 0

#10 Stefan

Stefan

    Stefan Mischook

  • Administrators
  • 4,251 posts
  • LocationMontreal Canada

Posted 09 February 2010 - 01:14 PM

Have you seen this:

http://www.killersit...ng-div-heigths/

Stefan
  • 0
StudioWeb makes teaching web design and programming easy: StudioWeb




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users