Footer Problems

[skater102]

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:

• home
• about us
• programs
• kids/youth
• links
• contact

• visitors
• nga
• gwhs
• calendar
• podcast

• Day – Weekly Events
  

  Time

NorthGate Church
1400 W. Jake Alexander Blvd.
Salisbury, NC

NorthGate Church. All rights reserved.

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;
}

[cssgirl]

"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.

[skater102]

"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]

[cssgirl]

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?

[skater102]

"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.

[Author]

Posts