Menu
Basically I have a nested <div> as a footer and the parent div is centered 1000px wide.
I was wondering if it was possible to extend the width of footer div so that it goes out of the parent to fit the browsers width but still keeps its place in the parent?
738
The solution is to simply not declare width: 100% . The default is width: auto , which for block-level elements (such as div ), will take the "full space" available anyway (different to how width: 100% does it).
A child div can also be wider than its parent by utilizing different positioning such as absolute or fixed positioning. Different results can occur depending on the specified position of the parent div but as long as the element is either absolute/fixed or contains a specified width, it will grow outside the parent.
The width of the div is by default 100% (due to display:block css) and the height vary according to the inner content. Also, the width will always remain 100% even if inner content has higher width.
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) */
}
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
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
