• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 218
  • Last Modified:

Static footer at bottom of webpage

Hi,

I have css code looking like this:
body {
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
}

/* Menu */
#menuBG
{
    background-color:#14171c;
    height:85px;
    width:100%;
}


#menuWrapper
{
    width:1120px;
    margin-left:auto;
    margin-right:auto;
    background-color:transparent;
    min-height:85px;
}

#menu
{
    float:right;
    width:800px;
    background-color:green;
    height:50px;
    margin-top:20px;
}

#logo
{
    margin-top:20px;
    width:300px;
    background-image:url(img/logoWhiteFull.png);
    background-repeat:no-repeat;
    float:left;
    height:44px;
}


#rotatorBG
{
    background-image:url(img/bgRotator.png);
    background-repeat:repeat-x;
    height:350px;
    width:100%;
}

#rotator
{
    width:100%;
    height:350px;
    background-color:blue;
}


#ContentWrapper
{
    width:1120px;
    margin-left:auto;
    margin-right:auto;
    background-color:transparent;
    
    Padding-bottom: 55px;
    overflow:hidden;
}

#content
{
    width:100%;
    margin-top:10px;
}

#footer {
      Position: absolute;
      Width: 100%;
      Bottom: 0;
      Height: 55px;  /* This value is the height of your footer */
      background-color:#14171c;
}

/* First page */
#fpLeft
{
    width:357px;
    padding-right:15px;
    float:left;
    border-right:1px solid #4a4a4a;
     background-color:red;
     display:inline;
}

#fpMiddle
{
    width:350px;
    padding-right:15px;
    padding-left:15px;
    float:left;
    border-right:1px solid #4a4a4a;
    background-color:green;
    display:inline;
}

#fpRight
{
    width:350px;
    padding-left:15px;
    float:left;
    border-right:0px solid #4a4a4a;
     background-color:blue;
     display:inline;
}

#fpLeft, #fpMiddle, #fpright
{
     padding-bottom: 32767px;
	 margin-bottom: -32767px;
}

Open in new window

The html markup is like this:
 <div id="menuBG">
            <div id="menuWrapper">
                <div id="logo"></div>
                <div id="menu"></div>
            </div>
        </div>
        <div id="rotatorBG">
            <div id="ContentWrapper">
                <div id="rotator"></div>
                <div id="content">
                    <div id="fpLeft">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </div>
                    <div id="fpMiddle">
                        sdf
                    </div>
                    <div id="fpRight">
                        sdf
                    </div>
                </div>
            </div>
            <div id="footer"></div>
        </div>

Open in new window

I want the footer to be static at the bottom and the header to be static at the top, but that is not working now as you can see form the following image:
Static footer not working
How can I fix it?

Thanks for help!

Peter
0
peternordberg
Asked:
peternordberg
  • 4
  • 2
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
Try adding height: 100% to your body element. You may have to add it to the html element as well.
html, body { height: 100%; }

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Wait a minute. #menuBG, which contains all the HTML you uploaded, including the footer, is only 85 pixels tall. #rotatorBG, which contains the footer, is only 350 pixels tall. This may all be irrelevant since neither of them are positioned, but I have to wonder why you have the footer buried in these elements.

Technically, absolute positioned elements are positioned relative to the nearest ancestor element that is positioned. If any ancestors of the #menuBG div are positioned, they will affect the positioning of the footer.

Which element is the header?
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
if that doesn't solve your problem, I use the following markup for my footer, which works across all browsers.

CSS
#footer                      { position:absolute; bottom:0; width:100%; height:70px; background:#000;  }
#footer #container           { margin-left: 15px; margin-top: 10px; height: 60px; background-color: #000; }

Open in new window


and the HTML
<div id="footer">
	<div id="container">
              content goes here
        </div>
</div>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
peternordbergAuthor Commented:
Hi and thanks for answer,

I've altered the code like this:
html, body { height: 100%; }

body {
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
}

/* Menu */
#menuBG
{
    background-color:#14171c;
    height:85px;
    width:100%;
}


#menuWrapper
{
    width:1120px;
    margin-left:auto;
    margin-right:auto;
    background-color:transparent;
    min-height:85px;
}

#menu
{
    float:right;
    width:800px;
    background-color:green;
    height:50px;
    margin-top:20px;
}

#logo
{
    margin-top:20px;
    width:300px;
    background-image:url(img/logoWhiteFull.png);
    background-repeat:no-repeat;
    float:left;
    height:44px;
}


#rotatorBG
{
    background-image:url(img/bgRotator.png);
    background-repeat:repeat-x;
    height:350px;
    width:100%;
}

#rotator
{
    width:1120px;
    height:350px;
    background-color:blue;
     margin-left:auto;
    margin-right:auto;
}


#ContentWrapper
{
    width:1120px;
    margin-left:auto;
    margin-right:auto;
    background-color:transparent;
    
    Padding-bottom: 55px;
    overflow:hidden;
}

#content
{
    width:100%;
    margin-top:10px;
}


    

 #footer                      { position:absolute; bottom:0; width:100%; height:55px; background:#14171c;  }
#footer #container           { margin-left: 15px; margin-top: 10px; height: 45px; background-color: #14171c; }

/* First page */
#fpLeft
{
    width:357px;
    padding-right:15px;
    float:left;
    border-right:1px solid #00bbe4;;
     background-color:transparent;
     display:inline;
}

#fpMiddle
{
    width:350px;
    padding-right:15px;
    padding-left:15px;
    float:left;
    border-right:1px solid #00bbe4;
    background-color:transparent;
    display:inline;
}

#fpRight
{
    width:350px;
    padding-left:15px;
    float:left;
    border-right:0px solid #00bbe4;
     background-color:transparent;
     display:inline;
}

#fpLeft, #fpMiddle, #fpright
{
     padding-bottom: 32767px;
	 margin-bottom: -32767px;
}

Open in new window


        <div id="menuBG">
            <div id="menuWrapper">
                <div id="logo"></div>
                <div id="menu"></div>
            </div>
        </div>
        <div id="rotatorBG">
            <div id="rotator"></div>
        </div>

        <div id="ContentWrapper">

            <div id="content">
                <div id="fpLeft">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </div>
                <div id="fpMiddle">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et j
                </div>
                <div id="fpRight">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et j
                </div>
            </div>
        </div>
        <div id="footer">
            <<div id="container">
                content goes here
            </div>
        </div>

Open in new window


But I still have the same problem!

Peter
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
When I place this as the only code in a web page, it works fine. What else do you have in your html page? Are these divs child elements of another element beside the body element?
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
I believe I know what you're trying to do now. Change your absolute positioned footer to
position: fixed;

Open in new window

You'll want to add a 55px margin to the bottom of your #rotatorBG to keep it from displaying behind the footer.
0
 
peternordbergAuthor Commented:
It worked when I changed from position:absolute to position:fixed. Thanks!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now