Thomas Hutton Thomas Hutton - 6 months ago 17
HTML Question

Footer Isn't Width of Parent Div

This footer is going to be the death of me. I've got to be responsive, but now it's not filling the width of my page div. I've tried auto, 100%, and inherit (it does fill the width, but then the responsiveness is destroyed).

My CSS:

.page {
width: 1100px;
margin: 0 auto;
height: 100%;
padding-bottom:50px;
}
.footer {
background-color: #277FD8;
position: absolute;
bottom: 0;
width: 100%;
height: auto;
}


My HTML:

<footer class="footer">
<div class="container-fluid">
<div class="row">
<a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
<br><br><br>
<p>&copy; 2016 Truespeed Internet Services - All Rights Reserved</p>
</div>
</div>
</footer>


When I use auto, it falls just short. When I use 100% it fills the width of the page.

What stupid thing am I doing wrong now?

Answer

I added your links into a .nav-justified list, which gives you the same behavior but with some more semantic mark up. If you'd like to see a full page view of what I have, go to This Code Pen, the code I use is below:

.page {
  width: 1100px;
  margin: 0 auto;
  height: 100%;
  padding-bottom: 50px;
}
.footer {
  background-color: #277FD8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  padding: 2px;
}
.footer .container-fluid {
  color: white;
}
.footer .container-fluid a {
  color: black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <ul class="nav nav-justified">
        <li><a href="">Privacy Policy</a>
        </li>
        <li><a href="">Terms of Service</a>
        </li>
        <li><a href="">Acceptable use Policy</a>
        </li>
        <li><a href="">Warranty &amp; Returns</a>
        </li>
        <li><a href="">Dignissimos.</a>
        </li>
        <li><a href="">Third Party Copyright Notices</a>
        </li>
        <li><a href="">Terms Of Service For Phone</a>
        </li>
      </ul>
    </div>
    <div class="row">
      <p>&copy; 2016 Truespeed Internet Services - All Rights Reserved</p>
    </div>
  </div>
</footer>

Comments