Take the 2-minute tour ×

Width 100% not working ?! How come ?

My footer is going outside the #wrap.

I don't want to set exact pixels to the footer.

Any solution?

live example :


the css :

#wrap {
    border: 1px solid #ccc;
    clear: both;
    display: table;
    vertical-align: middle;
    position: relative;
    width: 400px;
    margin: 0 auto 10px;
    padding: 10px;

footer {
    clear: both;
    background: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 5px;
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    overflow: auto;
    min-height: 100%;
    height: auto !important;

the html :

<div id=wrap>
<footer>&copy; 2013 PUAction&nbsp;&middot;&nbsp;<a href="#">Terms</a>&nbsp;&middot;&nbsp;<a href="#">Disclaimer</a>&nbsp;&middot;&nbsp;<a href="#">Privacy</a>&nbsp;&middot;&nbsp;<a href="#">Login</a></footer>        
share|improve this question
add comment

4 Answers

up vote 1 down vote accepted

This is the default box-model behavior :

Width = width + padding-left + padding-right + border-left + border-right

Therefore, your width is 100% + 2*10px which is larger than the footer's width...

You can :

  1. Remove width: 100% which will result on an implicit use of width: auto (which is just fine because block elements automatically fill the width of their parent)
  2. Use the box-sizing: border-box properties

For deeper explanations, just take a look at this resource and this one!


share|improve this answer
add comment

You're using display:table on the container. That means the direct child (in this case "footer") should be display:table-cell.

share|improve this answer
I have updated the footer to : display: table-cell; and still not working –  masteringprojects Dec 30 '13 at 13:01
You don't need the float on a 100% width element. Remove it. It should work now. –  SamP Dec 30 '13 at 13:05
add comment

When you say width: 100%; that doesn't include the padding, so you have width:100% + padding: 10px that gives you 100% + 20px width.

A simple solution is to add box-sizing: border-box;

footer { box-sizing: border-box; }


share|improve this answer
Still going outside the wrap in your example –  masteringprojects Dec 30 '13 at 13:03
Yep forgot to add the moz prefix, see it now. –  drip Dec 30 '13 at 13:04
I think this a wrong approach. His semantics are wrong. When he uses proper semantic approach, the problem is automatically fixed without the use of a new box-sizing method. –  SamP Dec 30 '13 at 13:08
add comment

Perfect !

Thanks guys !

box-sizing: border-box;



share|improve this answer
Thanks, I had indeed forgotten FF prefix! –  Marc Dec 30 '13 at 13:16
Yep! Problem solved! :D Many Thanks ! –  masteringprojects Dec 30 '13 at 13:19
add comment

Your Answer


