Results 1 to 5 of 5

Thread: Vertically elastic site

  1. #1
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default Vertically elastic site

    Hi,

    Newby question.... please can someone suggest a way of making the #content section of my website vertically 'elastic' to allow for more content as-and-when required. ie #content expands downwards and #footer moves with it.

    Minimum height of #content section would be 340px.

    I have included the CSS (but obviously everything).

    I'm assuming this is all you will need, but if you require any other info - please let me know.

    Thanks!

    body {
    text-align: center;
    background-color: #FFFFFF;
    background-image: url(images/frun-body-grad.jpg);
    background-repeat: repeat-x;
    background-position: top;
    }

    #master {
    width: 810px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    left: 0px;
    top: 0px;
    height: auto;
    }

    #header {
    position:absolute;
    left:0px;
    top:0px;
    width:810px;
    height:300px;
    background-image: url(images/frun-header.png);
    background-repeat: no-repeat;
    }

    #content {
    position:absolute;
    left:0px;
    top:300px;
    width:810px;
    height:340px;
    background-image: url(images/frun-content-bg.png);
    background-repeat: repeat-y;
    }

    #footer {
    position:absolute;
    left:0px;
    top:640px;
    width:810px;
    height:50px;
    background-color: #FFFFFF;
    background-image: url(images/frun-footer.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    }

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    You can specify a auto height on all elements that needs to be fit with the content. From the CSS you've mentioned in your post it seems that for most of the items you have set an explicity height value.

    Certain containers will have a specific height but the element whose height you don't know should be a auto height element like the following manner:

    Code:
    height:auto;
    Most of the sites will have a main content area whose height will be auto may be you can have a min-height if you want. So that even if there is no content the element will have a minimum height.

    Hope this helps.

  3. #3
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default Vertically elastic site

    Thank you for your reply.

    Unfortunately simply specifying "auto" in the height of #content does not work.The #footer which has a "top:640px;" stays where it is.

    How can I put an auto in height and get the footer to always be immediately below the #content?

    Thanks

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Can you provide a link where I can see your page in question? This would help me (or any other one) to correctly guide you.

  5. #5
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default Link

    Hi

    I've just put these pages up. They are not fully functioning but highlight the problem:

    1) The text over runs in these examples and the footer is positioned correctly: http://www.actonfunrun.co.uk/about_css.html
    http://www.actonfunrun.co.uk/past_events_css.html

    2) This example works, because the text fits within the #content height:
    http://www.actonfunrun.co.uk/get_involved_css.html

    Thanks in anticipation of your help!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •