Sticky Footer Doesn't Have 100% Width

I have a website with the following structure:

Solution 1:

You can set some properties to #pagecontent then it will work as per your need:

html {
    margin: 0;
    padding: 0;
    height: 100%;
    min-width: 100%;
}
#pagecontent {
    float: left;
    position: relative;
}
#pagecontainer {
    min-height: 100%;
    min-width: 100%;
    position: relative;
}       
#bigContent {
    background: black;
}
#footer {
    background: blue;
    height: 25px;
    width: 100%;
}

<divid="pagecontainer"><divid="anyContent"></div><divid="pagecontent"><divid="bigContent"style="width:500px; height:150px;"></div><divid="footer"></div></div></div>

Solution 2:

You have set the width: 5000px and height to 3000px.

<div id="bigContent" style="width:5000px; height:3000px;"></div>

Try this

<div id="bigContent"></div>

and add

#bigContent {
    background: yellow;
    height: 1000px;  
    width: 100%;
}

FIDDLE

Solution 3:

You set width to #bigContent, better would be to set this width to #pagecontent.

<div id="pagecontainer">
    <div id="anyContent"></div>
    <div id="pagecontent" style="width:5000px;">
        <div id="bigContent" style="height:3000px;"></div>
        <div id="footer"></div>
    </div>
</div>

http://jsfiddle.net/47hb3fcn/3/

Share