Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% of height with a footer

    Hi,

    i have been searching for an answer to this and can't quite find an answer.

    I have a layout with a header div. A container div that has a left menu div and a content div inside it - these are using floats. And also a footer div that I have tried outside of the container div as well as inside the container div.

    I would like the left menu div be filled with a background color and to be 100% of the container div. Stopping at the footer.

    Right now i can either get it to come close to the footer OR it goes past the footer to the end of the viewport.

    I have just given the CSS and HTML that is revelant.

    CSS:
    body, h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li, table, tr, th, td, form {
    margin: 0; padding: 0; border: 0; list-style: none; font-size: 100%; font-weight: normal;
    }

    html, body {
    height: 100%
    text-align : center;
    }

    body {
    background-color: #F9F4c5;
    }

    #header {
    width: 750px;
    margin: 0px auto;
    padding: 0px;
    }

    #container {
    padding: 0px;
    margin-right: auto;
    margin-left: auto;
    width: 750px;
    min-height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    }
    /* IE-specific hack */
    * html #container {
    height: 100%;
    }

    #content {
    width: 610px;
    margin-right: auto;
    margin-left: auto;
    vertical-align: bottom;
    float: right;
    }
    #lftmenu {
    position:relative;
    background-color: #9BD393;
    width: 135px;
    margin: 0px;
    padding: 0px;
    background-repeat: no-repeat;
    float: left;
    background-image: url(../images/toplftmenu.jpg);
    background-position: left top;
    text-align: right;
    min-height: 100%;
    }

    .clearfloats {
    line-height: 0px;
    font-size: 0px;
    clear: both;
    height: 0px;
    }
    #footer{
    background-color: #ae89bd;
    width: 750px;
    margin-right: auto;
    margin-left: auto;
    }



    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    .......
    <div id="header"> HEADER CONTENT
    </div>

    <!-- Start Container -->
    <div id="container">


    <!-- Start of Middle Content -->

    <div id="content">Middle Content



    </div>

    <!--Start Left Menu Content -->
    <div id="lftmenu">
    CONTENT FOR LEFT MENU
    </div>

    <div class="clearfloats"><!-- --></div>

    <!--Start footer -->
    <div id="footer">
    CONTENT FOR FOOTER
    </div>
    </div>


    Also a link to the site is here: http://www.insidescoopri.com/insides...ntitled-1.html

    THANKS SO MUCH TO ANYONE WHO CAN POINT ME IN THE RIGHT DIRECTION
    IM LOST!!!


    Thanks
    Deb

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hey Deb, i would recommend that when you post, you encase your code in these tags (without *)

    [*code] code here [/*code]

    and it'll look like
    Code:
    this
    can you possibly provide a url so we can see what is going wrong?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply!

    Sorry bout the code. I have never really posted here before.

    Here is a link to the page i am working on. It's in progress as I i trying to figure out layout right now with my wee bit of CSS knowledge!


    http://www.insidescoopri.com/insides...ntitled-1.html

    Thanks
    Deb

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    so basically you want to get rid of the little patch of green underneath the purple footer?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i think part of your problem is a browser issue... see in IE i don't see the left menu at all but the footer is on the bottom

    I'll have a closer look after lunch, but my troubleshooting skills leave something to be desired
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Footer looks OK to me using IE7. Left panel is missing. With Firefox. Footer is not on the bottom.

    Frank
    Last edited by effpeetee; 08-10-2007 at 10:02 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks everyone for checking it out. I think I just need to start from scratch.


  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey Deb,

    Don't get discouraged: go to http://validator.w3.org/ and enter the address of your page in there. I suggest going to "more options" and selecting 'verbose output"

    From what I saw it outlined the major problems you were having

    If you need further help, just post back

    Chin up
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thats a good link to have, thanks harbinger
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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