Sticky footer

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
5/27/2010 5:20:21 AM
Gravatar
Total Posts 17

Sticky footer

Hi,

Sorry if this has already been answered somewhere. I couldn't find anything similar but feel free to correct me if I'm wrong.

I'm a first time user of mojoportal and have been trying to edit one of the skins (ramblingsoul-colorpencils) to fit an existing design I have for a customer. The design needs to have a footer that is always at the bottom of the viewport, unless the content extends beyond that, when the footer will need to move to wherever the content ends, (sometimes described as a "sticky footer").

I've tried a few different methods that I've found online but nothing seems to work across all browsers.

Are there any skins that incorporate this, or is anyone willing to share any successful methods used?

Thanks,

Andy

5/27/2010 8:43:50 AM
Gravatar
Total Posts 2202

Re: Sticky footer

Hi Andy,

You can take a look at i7media-2horizontalmenus. It has a sticky footer.

HTH,
Joe D.

5/28/2010 4:31:32 AM
Gravatar
Total Posts 17

Re: Sticky footer

Thanks Joe!

I was able to use some of that CSS and fiddle round with the nesting a bit and it's solved it.

Great help. Thanks again!

10/5/2010 9:52:02 AM
Gravatar
Total Posts 42

Re: Sticky footer

What was your solution to the sticky footer? I found a solution here. I was able to achieve the effect by making #wrapfooter a child of the body and nexting #wrapwebsite inside a parent div:

/* Sticky footer - place at bottom of style.css */
html, body, #sitewrapper {height: 100%;}
body > #sitewrapper {height: auto; min-height: 100%;}
#wrapwebsite {padding-bottom: 100px;}  /* must be same height as the footer */
#wrapfooter {
    position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;

<body class="pagebody">
    <div id="sitewrapper">
        <div id="wrapwebsite">
            ....
        </div>
    </div> <!-- sitewrapper -->
    <div id="wrapfooter">
        ....
    </div>
</body>

You must sign in to post in the forums. This thread is closed to new posts.