CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Thomas Hutton
Thomas Hutton

Reputation: 803

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?

Upvotes: 1

Views: 835

Answers (4)

Jhecht
Jhecht

Reputation: 4435

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>

Upvotes: 1

agustin
agustin

Reputation: 2387

Try adding left: 0, right:0 and float: left to the element.

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18565

You're using a UI framework which had lots of margins and padding built in to their components. There must be margin applied that you don't see. You could try adding margin-left:0 !important; and margin-right:0 !important;

One other thing, using absulute or fixed positioning may mess up how your page displays on mobile devices - especially when they go into text entry mode and the keyboard cuts the viewport in half. Many mobile browsers don't know how to handle absolute positioning.

Upvotes: 0

Jonathan
Jonathan

Reputation: 15432

Try adding left: 0; to the .footer class. JSFiddle.

Upvotes: 0

Related Questions