Search code examples
cssoperafooter

footer's padding making it expand over its parent div width

I have a footer in my webpage with some text in it. When i try to add padding-left property to it, the width of the footer expands over the enclosing parent div element and this problem only happens with Opera and not with Chrome or Firefox or IE.. What should be done to correct it ??

CSS for footer :

footer {
color: #FFFFFF;
background-color: #3399CC;
padding-top: 12px;
padding-bottom: 12px;
width: 100%;
float: left;
}
Solution

  • you can fix this problem by taking a div inside footer tag and apply padding to that div 

    <style>
footer {
    color: #FFFFFF;
    background-color: #3399CC;  
    width: 100%;
    float: left;    
}
.footer {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left:10px;
}
</style>
<footer>
<div class="footer">hello this is footer</div>
</footer>