Search code examples
csswidthfooter

Width 100% goes outside the wrap

Width 100% is not working! My footer is going outside the #wrap and I don't want to set exact pixels to it.

Any solution?

live example.

#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;
}
<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>
</div>

Solution

  • 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!

    Regards.