CODEWITHSUNDEEP
htmlcsssticky-footer
pumpkinzzz
pumpkinzzz

Reputation: 2967

sticky footer display table not working on Firefox / IE

I'm developing a basic sticky footer template using display: table technique. It works just fine in Chrome, but in Firefox and IE is not: footer is pushed away by the content.

Clearly i'm missing something basic here, i'm kinda newbie in CSS, so forgive me.

Here it is some code:

HTML

<div id="container">
    <div id="header" class="row">Header</div>
    <div id="content" class="row">
        <p>some content 1</p>
        <p>some content 2</p>
        <p>some content 3</p>
        ...
    </div>
    <div id="footer" class="row">Footer</div>
</div>

and CSS

html, body{ 
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
#container{
    width: 100px;
    height: 100%;
    display: table;
}
.row{
    display: table-row;
    position: relative;
}
#header, #footer{
    height: 50px;
}
#content{
    float: left;
    height: 100%;
    width: 100%;
    overflow: auto;
}

DEMO HERE

Thank you

Upvotes: 0

Views: 466

Answers (1)

Pete
Pete

Reputation: 58442

remove the float:left from #content:

Updated demo

Update

Given the need for a scrollable middle part and your fixed height header and footer, I would use fixed positioning instead of display:table;

#header, #footer, #content {
    position:fixed;
    left:0;
    width:100%;
}
#header, #footer {
    background:red;
}
#header {
    top:0;
    height:50px;
}
#footer {
    bottom:0;
    height:50px;
}
#content {
    top:50px; /*height of header*/
    bottom:50px; /*height of footer*/
    overflow:auto;
    padding:0;
}
<div id="header" class="row">Header</div>
<div id="content" class="row">
            <p>some content 1</p>
            <p>some content 2</p>
            <p>some content 3</p>
            <p>some content 4</p>
            <p>some content 5</p>
            <p>some content 6</p>
            <p>some content 1</p>
            <p>some content 2</p>
            <p>some content 3</p>
            <p>some content 4</p>
            <p>some content 5</p>
            <p>some content 6</p>
            <p>some content 1</p>
            <p>some content 2</p>
            <p>some content 3</p>
            <p>some content 4</p>
            <p>some content 5</p>
            <p>some content 6</p>
</div>
<div id="footer" class="row">Footer</div>

Upvotes: 1

Related Questions