Grow your CSS skills. Land your dream job.

Footer Problems

  • # September 25, 2008 at 7:54 pm

    I am in the early stages of designing a new site for my church. The footer for some reason is floating below the main content. I am pretty sure it is a margin problem but nothing that I have tried will work. Anybody know how to fix it.

    Here the site.
    http://northgatechurch.org/newsite/

    Here is the HTML.

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">




    And here is the CSS.

    Code:
    * {
    margin:0;
    padding: 0;
    }
    body {
    font-family:ariel;
    background: #221E1F;
    height:100%;
    }
    .floatleft{
    float:left;
    }
    .floatright{
    float:right;
    }

    .clear {clear:both}

    h3{
    font-size:small;
    font-style:italic;
    }

    .center {
    margin:0 auto;
    }

    #events{
    padding:0 0 0 20px ;
    }

    #header {
    height: 178px; width: 950px;
    background: url(images/header.jpg) no-repeat;
    }
    #page-wrap{
    width: 950px;
    margin:0 auto;
    }
    #main-content {
    background: #000000;
    width: 950px;
    }
    #footer{
    background: #333333;
    width: 950px;
    height:75px;
    margin:0px 0 0 0;

    }
    #left-col{
    width: 675px;
    height: 491px;
    margin:1px 0 0 0;
    float: left;
    background: url(images/leftcol_bg.jpg) repeat-x;
    }
    #right-col{
    padding:32px 0 0 0px;
    width:275px;
    height: 491px;
    float: right;
    background: url(images/rightcol_bg.jpg) repeat-x;
    border-style:none;

    }

    div#events {
    margin:10px 0px 225px 0px;
    }

    ul#events{

    font-family: Helvtica, Gadget, sans-serif;
    list-style:circle;
    list-style-image:url(images/dot.png);
    text-decoration:none;
    padding:0px 0 0 0px;
    margin:0 0 0px 25px;

    }
    ul#events li a {
    color:#4B0F11;
    font-size:medium;
    }
    /* menu */
    ul#menu {
    list-style: none;
    padding:128px 0 0 330px;
    }
    ul#menu li{
    display:inline;
    }
    ul#menu li a{
    text-indent: -9999px;
    display:block;
    height: 51px;
    float:left;
    }
    ul#menu li a.home{
    background: url(images/menu_home.jpg) no-repeat bottom center;
    width:107px;
    }
    ul#menu li a.home:hover ,ul#menu li a.home:active{
    background-position: top center;
    }

    ul#menu li a.about{
    background: url(images/menu_about.jpg) no-repeat bottom center;
    width:95px;
    }
    ul#menu li a.about:hover ,ul#menu li a.about:active{
    background-position: top center;
    }
    ul#menu li a.programs{
    background: url(images/menu_programs.jpg) no-repeat bottom center;
    width:95px;
    }
    ul#menu li a.programs:hover ,ul#menu li a.programs:active{
    background-position: top center;
    }
    ul#menu li a.kids{
    background: url(images/menu_kids.jpg) no-repeat bottom center;
    width:97px;
    }
    ul#menu li a.kids:hover ,ul#menu li a.kids:active{
    background-position: top center;
    }
    ul#menu li a.links{
    background: url(images/menu_links.jpg) no-repeat bottom center;
    width:95px;
    }
    ul#menu li a.links:hover ,ul#menu li a.links:active{
    background-position: top center;
    }
    ul#menu li a.contact{
    background: url(images/menu_contact.jpg) no-repeat bottom center;
    width:129px;
    }
    ul#menu li a.contact:hover ,ul#menu li a.contact:active{
    background-position: top center;
    }
    body#home ul#menu li a.home
    body#home ul#menu li a.about
    body#home ul#menu li a.programs
    body#home ul#menu li a.kids
    body#home ul#menu li a.links
    body#home ul#menu li a.contact {
    background-position: top center;
    }

    /* nav */
    ul#nav {
    list-style: none;
    padding:20px 0 0 47px;
    }
    ul#nav li{
    display:inline;
    }
    ul#nav li a{
    text-indent: -9999px;
    display:block;
    height: 176px;
    float:left;
    }
    ul#nav li a.visitors{
    background: url(images/nav/nav_visitors.png) no-repeat bottom center;
    width:110px;
    }
    ul#nav li a.visitors:hover ,ul#nav li a.visitors:active{
    background-position: top center;
    }

    ul#nav li a.nga{
    background: url(images/nav/nav_nga.png) no-repeat bottom center;
    width:110px;
    }
    ul#nav li a.nga:hover ,ul#nav li a.nga:active{
    background-position: top center;
    }
    ul#nav li a.gwhs{
    background: url(images/nav/nav_gwhs.png) no-repeat bottom center;
    width:110px;
    }
    ul#nav li a.gwhs:hover ,ul#nav li a.gwhs:active{
    background-position: top center;
    }
    ul#nav li a.calendar{
    background: url(images/nav/nav_calendar.png) no-repeat bottom center;
    width:109px;
    }
    ul#nav li a.calendar:hover ,ul#navli a.calendar:active{
    background-position: top center;
    }
    ul#nav li a.podcast{
    background: url(images/nav/nav_podcast.png) no-repeat bottom center;
    width:111px;
    }
    ul#nav li a.podcast:hover ,ul#nav li a.podcast:active{
    background-position: top center;
    }

    # September 25, 2008 at 8:23 pm

    Well i didn’t see the problem you are talking about when I looked at the page. But i think from looking at your code that I do know why you would have that problem and how to fix it.
    You need to clear the floats. Like this

    .clear { clear: both; }

    then in your html. use it like this

    <div class="clear"></div>

    put that ater you float any content.

    What happens is that if your content is shorter than your sidebar, the footer moves up under the content area because there is room for it to fit. If the content is longer than the sidebar, the reverse happens. If you clear the float, then that tells the div to make sure nothing is on the left or right of the div. that pushes the footer back into the position you intended for it to be in. You can do clear:right; clear:left; or clear:both;

    To experiment with this. make a simple content area, sidebar and footer. Make one longer than the other, use a background color so you can see the areas and see how the footer reacts. Throw in a div to clear the floats just before the footer and see what happens.

    # September 25, 2008 at 9:06 pm
    "cybershot" wrote:
    You need to clear the floats. Like this

    .clear { clear: both; }

    then in your html. use it like this

    <div class="clear"></div>

    put that ater you float any content.

    I’m gonna disagree here. Instead of throwing in a bunch of empty divs with the clear property you should do a few other things first. Then if all else fails use cybershot’s suggestion.

    If you want your float to clear and nothing to float on either side of it, throw in the clear:both ON the element you’re floating. If you want something not to float to the left/right of it clear it on the appropriate side.

    # September 26, 2008 at 8:29 pm
    "cybershot" wrote:
    Well i didn’t see the problem you are talking about when I looked at the page. But i think from looking at your code that I do know why you would have that problem and how to fix it.
    You need to clear the floats. Like this

    .clear { clear: both; }

    then in your html. use it like this

    <div class="clear"></div>

    put that ater you float any content.

    What happens is that if your content is shorter than your sidebar, the footer moves up under the content area because there is room for it to fit. If the content is longer than the sidebar, the reverse happens. If you clear the float, then that tells the div to make sure nothing is on the left or right of the div. that pushes the footer back into the position you intended for it to be in. You can do clear:right; clear:left; or clear:both;

    To experiment with this. make a simple content area, sidebar and footer. Make one longer than the other, use a background color so you can see the areas and see how the footer reacts. Throw in a div to clear the floats just before the footer and see what happens.

    I already have a DIV with a class of float and that does fix the problem.Here is what I am talking about, see how there is a space between the main content and the footer. I have tested it in Firefox, I.E., Safari, Chrome and Opera and the same problem always occurs.
    [attachment=0]screencap.jpg[/attachment]

    # September 27, 2008 at 1:26 pm

    I got it!

    You’re right-col div is causing the problem. Take a look a the screenshot below that I grabbed when using the Aardvark FF extension. You will see the right-col is pushing your footer down.

    [attachment=0]rightcol.jpg[/attachment]

    You’re CSS has a height set for that div:

    Code:
    #right-col{
    padding:32px 0 0 0px;
    width:275px;
    height: 491px;
    float: right;
    background: url(images/rightcol_bg.jpg) repeat-x;
    border-style:none;

    }

    You have a padding top of 32. You failed to subtract the additional padding you added from the height of the div.

    Using the web developer toolbar and editing the CSS on the fly taking the height to 459px fixes the issue :)

    I’d reccomend though you remove the height for that div. What if you left content extends farther down than the height of the sidebar? Same issue will occur and vice versa. It’s best to leave the height blank (ie: then it will be sent to "auto", and add a background-color that matches the end of your gradient.

    Also, this is just a side note, but design wise you have a lot of gloss and shine and icony (a very oldschool web 2.0 looks) that doesn’t quite fit with the header image, which is kinda soft and gives a serene feeling, while the rest of the layout gives more of a feeling of flash, and excitement?

    That make sense?

    # September 27, 2008 at 7:11 pm
    "cssgirl" wrote:
    I got it!

    You’re right-col div is causing the problem. Take a look a the screenshot below that I grabbed when using the Aardvark FF extension. You will see the right-col is pushing your footer down.

    [attachment=0]rightcol.jpg[/attachment]

    You’re CSS has a height set for that div:

    Code:
    #right-col{
    padding:32px 0 0 0px;
    width:275px;
    height: 491px;
    float: right;
    background: url(images/rightcol_bg.jpg) repeat-x;
    border-style:none;

    }

    You have a padding top of 32. You failed to subtract the additional padding you added from the height of the div.

    Using the web developer toolbar and editing the CSS on the fly taking the height to 459px fixes the issue :)

    I’d reccomend though you remove the height for that div. What if you left content extends farther down than the height of the sidebar? Same issue will occur and vice versa. It’s best to leave the height blank (ie: then it will be sent to "auto", and add a background-color that matches the end of your gradient.

    Also, this is just a side note, but design wise you have a lot of gloss and shine and icony (a very oldschool web 2.0 looks) that doesn’t quite fit with the header image, which is kinda soft and gives a serene feeling, while the rest of the layout gives more of a feeling of flash, and excitement?

    That make sense?

    Thanks for the help that fixed the problem. And thanks for your feedback. It is greatly appreciated but I did not do the design work, I am just building the HTML and CSS.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".