Footer Problem Shifting/Sticky Footer

HTML & CSS
1

Hi My footer in one of my pages is shifting upward not sure why…I tried to see if its my margin in the footer itself and the content inside that page but nothing im sure there is something broken…

1164×432 40.1 KB

2

What’s the point of you having #wrapper2{} element? Put it back to #wrapper. Your #wrapper2{} has a huge bottom margin set.

(Above comments refer to changing the HTML back.)

3

Well the reason for that is I wanted all the wrappers to have the same height on some of the pages even though I have very few content in some pages and I did not know how else to achieve that.

4

So you wanted a sticky footer, sorta? Footer always at the bottom but will extend if there is enough content?

1 Like
5

Correct.

6

This is how I worked it out but I get my footer all weird…and their is no consistent set height.

html {
    margin:0;	
    padding:0;	
    height:100%;
}

body {
    margin:0;	
    padding:0;	
    height:100%;
}

#footer {
    overflow:hidden;
	clear: both;
    background: #eae9e9;
	display:table-row;
    height:1px
	

}


.clearfix
{
    background-color: white;
    background-repeat: no-repeat;
    z-index: 100;
    margin-top:-10px;
    display:table-row
    height:1px
}


#wrapper {
    margin:0;	
    padding:0;	
    height:100%;
    display:table;
    width:50%;
    margin:auto;
}

1256×245 18.1 KB

1244×156 20.7 KB

7

Link? The link in post #1 doesn’t show that.

Note: Your html/body rules can be combined - they literally have the same thing set.

8

Link: Example

9

Hi,

If you are still trying to do the sticky footer approach then you have got it all wrong I’m afraid. The nestings are all wrong and some important rules are missing.

To get your footer back on track remove the height:1px and the display:table-row from #footer and it will spring back into place. It won;t be a sticky footer but it will be in place.

If you want a sticky footer then you must use the structure as shown in my example and make sure your html is inside that structure.

I notice you have a form around the page and this will also break the sticky footer routine. If the form has to stay outside the main wrapper then you will also need to give the form a 100% height and width and display:table otherwise you can’t pass the height on to the children.

Your clearfix rule is broken as you have missed a comma and you don’t use the clearfix class in that way any way :smile: You use the :after pseudo class to create a rule that will encompass floats. You don’t apply the rule directly to an element.

.clearfix:after{
content:"";
clear:both;
display:table;
}

You won’t need to contain floats anyway if they are inside a display:table element as table-cells automatically contain floats and the :after will break the table anyway as it creates another cell.

Lastly your page redirects me to download adobe shockwave playet but I don’t want to.:frowning:

10

Its doing that to IE browser only not sure why…did you open it in IE?

11

if I take that off then my content goes all over and it doesnt work when I put it in the

[quote=“PaulOB, post:9, topic:112792”]
.clearfix:after
[/quote] it wont work…

12

I did im not sure what im doing wrong…

13

Look at your structure. Everything within <body> . Does it match Pauls? You’ll find it’s not close (no offense.)

14

Ok ill try to figure out again…

15

Is there any reason you can’t take his structure and just paste all your content into the appropriate places?

1 Like
16

Alright so Here is what I got so far but my header and footer is a little funky. The links on my footer are not reading my code for some reason and shifting to the right…my nav in my header is not at the bottom of the image its like going upward.

17

Hi,

You need to remove the display:table-cell rules from your inner header elements as you have floated them and float and table-cell don’t go together.

Then just float and clear the nav and remove some padding and margins and it will fit.

e.g.:

#header-wrap a {
    /*display:table-cell;*/
    float:left;
}
#header-wrap img {
    /*display:table-cell;*/
    float:right;
}
.quality_img {
    margin-top:5px;
}
.nav {
    float: right;
    clear:right;
}
.nav ul{
    margin:0;
    padding:0;
    list-style:none;
}

The footer has the text-aligned to the center so you may want to reset it to the left.

#footer{text-align:left}
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.