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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    footer problem (CSS)

    Hi!
    I have a problem with my footer ... it doesn't stay where i want it to stay
    I want my footer to be under everything, but it keeps going to wrong place .
    My HTML looks like this:

    <body>
    <div id="wrapper">
    <div id="header">
    <div id="field1"></div>
    <div id="field2"></div>
    </div>
    <div id="menu">
    <div id="field3"></div>
    <div id="field4"></div>
    <div id="field5"></div>
    </div>
    <div id="container">
    <div id="field6">
    <div id="field8"></div>
    <div id="field9"></div>
    </div>
    <div id="field7">
    <div id="field10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    </div>
    <div id="footer"></div>
    </div>
    </body>

    and CSS looks like that:

    #wrapper {
    width:1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    }

    /*header*/

    #header {
    width:1000px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
    }
    #field1 {
    width:250px;
    height:250px;
    float:left;
    background-color:#333333;
    }
    #field2 {
    width:750px;
    height:250px;
    float:right;
    background-color:#666666;
    }

    /*menu*/
    #menu {
    width:1000px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    }
    #field3 {
    width:700px;
    height:40px;
    float:left;
    background-color:#999999;
    }
    #field4 {
    width:200px;
    height:40px;
    float:left;
    background-color:#000000;
    }
    #field5 {
    width:100px;
    height:40px;
    float:right;
    background-color:#333333;
    }

    /*container*/

    #container {
    width:1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    }
    #field6 {
    width:250px;
    height:500px;
    float:left;
    }
    #field7 {
    width:750px;
    height:auto;
    float:right;
    }

    /*field6*/
    #field8 {
    width:250px;
    height:250px;
    background-color:#333333;
    float:left;
    }
    #field9 {
    width:250px;
    height:250px;
    background-color:#666666;
    float:left;
    }

    /*field7*/
    #field10 {
    width:740px;
    height:auto;
    margin-left:10px;
    margin-top:10px;
    background-color:#999999;
    }

    #footer {
    width:1000px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FF0000;
    }

    I know that my footer goes there because of container .. if i put specific height for it, it's all good, but i want it to be auto. I tried even deleting field7 and only leave field10 with auto height, but it still didn't work, footer was once again in wrong position..

    What i'm asking you guys is what should i do to get footer to right position and leave field10 with auto height..

    Damn i hope you understood what i meant.. anyways, i hope you can help me

    Mart.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    put the footer outside the content, and then give the content a margin-bottom:-40px;... then you can leave the field divs alone...

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    put the footer outside the content, and then give the content a margin-bottom:-40px;... then you can leave the field divs alone...
    I'm not sure what you mean, because i think that footer is outside the content .. you mean outside the wrapper?

    maybe you can give me code sample?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Are you clearing your floats??

    I like method "d" best and works in MOST cases.
    Teed

  • Users who have thanked teedoff for this post:

    warbel (08-19-2011)

  • #5
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Are you clearing your floats??

    I like method "d" best and works in MOST cases.
    Yup, that was the problem .. thanks man


  •  

    Posting Permissions

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