CODEWITHSUNDEEP
css
Shedlor
Shedlor

Reputation: 85

Keep Footer below dynamic content

so I'm trying to tame the Footer so that it stays below the dynamic content container, but whatever way I try it (Pos: Abs, Bottom: 0; etc etc) it either appears halfway up the content or fixed at the bottom. Either I don't want. It would be appreciated if someone could shine a light on my problem.

HTML:

<div id="Content">
    <div id="G6"></div>
    <div id="Post-Block">
        <div id="block">
            <div id="feat-img"></div>
            <div id="date"></div>
        </div>
    </div>
    <div id="Footer">
        <div id="G7"></div>
        <div id="FooterBreak"></div>
        <div id="FooterBG"></div>
        <div id="FooterLinks">
        </div>
        <div id="Copyright">
        </div>
        <div id="Copyright2">
        </div>
        <div id="FooterBreak2"></div>
    </div>
</div>

CSS:

#Footer {
    width: 100%;
    height: 230px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#Content {
    z-index: 7;
    background: url(/images/content%20bg.jpg) repeat left top;
    position: absolute;
    top: 336px;
    width: 999px;
    height: auto;
    color: #fff;
    min-height: 950px;
    margin: 0 0 230px;
}
html {
    position: relative;
    height: auto !important;
}
body {
    z-index: 0;
    background: url(/images/background-texture%20d.jpg);
    left: 0;
}
#page {
    z-index: 1;
    width: 1000px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 0

Views: 823

Answers (1)

jennEDVT
jennEDVT

Reputation: 739

EDIT: When I used the Chrome dev tools to inspect the Crow's Perch website, it looks like your problem is that the height of your HTML is smaller than your content (ie, you use negative bottom values in your absolute positioning for some of your content). Given this, you could add bottom: -865 to #footer, but given that you said your content is dynamic, that's an EXTREMELY brittle solution. Unfortunately, since you're pixel-pushing all of your elements, I don't think there's a way to have your footer respond dynamically to your changing content. More comprehensive refactoring of your code is likely necessary.

Good luck!

Upvotes: 1

Related Questions