Can a nested Div ignore the parent Div width?

Something that would work for you:

.parent{
    width: 300px; /* your parent width */
}
.footer{
    height: 50px; /* your footer height */
    position:absolute;
    left: 0px;
    right: 0px;
}

Demo


My solution assumes that .parent element has stretched height. even if it is not the case, then it seems you want the .footer element stick to the bottom of the page. If it is so, then using position:absolute you can bring the child block out of the parent block and then pin it to bottom using bottom: 0px and then to stretch its width use left:0px and right: 0px.

Working Fiddle

UPDATED:

Use this Doctype declaration:

<!DOCTYPE html>

Also, in .footer element mention top:auto css property. Something like this:

.footer{
    padding: 0px 15px;
    height: 50px;
    background-color: #1A1A1A;
    position:absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: auto;  /* added (IE FIX) */
}

Tags:

Html

Css

Recent Posts