Solved

Static footer at bottom of webpage

Posted on 2014-04-10
7
204 Views
Last Modified: 2014-04-10
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
Comment
Question by:peternordberg
  • 4
  • 2
7 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39992289
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39992309
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
 
LVL 32

Expert Comment

by:Big Monty
ID: 39992337
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:peternordberg
ID: 39992385
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39992400
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
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 39992412
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
 

Author Closing Comment

by:peternordberg
ID: 39992440
It worked when I changed from position:absolute to position:fixed. Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Centering a nested div 16 57
jquery add something to a div 4 37
css help with menu spacing 10 30
WordPress Themes 10 34
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now