CODEWITHSUNDEEP
htmlcss
Michael Kaylor
Michael Kaylor

Reputation: 3

How can I get a banner-like footer?

My footer has a background, however I can't get it to have a solid black rectangle. The black will only surround my text, not my wrapper div nor my footer.

.footer {
  color: #FFF;
  background-color: #000;
}

.DIV37n5 {
  float: left;
  width: 37.5%;
}
<footer class="footer">
  <div class="Wrapper">
    <div class="DIV12n5">
      <table width="20%" border="1" class="InfoTbl">
        <tr>
          <th scope="col">Public Sources of Info</th>
        </tr>
        <tr>
          <td><a href="https://wikileaks.org/">WikiLeaks</a></td>
        </tr>
        <tr>
          <td><a href="https://kongregate.com/">And if ya get 
                bored</a>
          </td>
        </tr>
      </table>
    </div>
    <div class="DIV50">
      <p class="PromiseTxt" align="right">This organization is a nonprofit organization dedicated to the spread of knowledge. Remember to always double-check your sources because even we
        <strong>aren't</strong> perfect!
      </p>
    </div>
    <div class="DIV37n5">
      <p class="PromiseTxt" align="center"> Updated about 1 minute ago
      </p>
    </div>
  </div>
</footer>

Those .DIV classes are all the same, with float:left and width depending on the numbers stated.

Upvotes: 0

Views: 49

Answers (1)

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Because you have a float , clear it

DEMO HERE

HTML

<footer class="footer">
  <div class="Wrapper">
    <div class="DIV12n5">
      <table width="20%" border="1" class="InfoTbl">
        <tr>
          <th scope="col">Public Sources of Info</th>
        </tr>
        <tr>
          <td><a href="https://wikileaks.org/">WikiLeaks</a></td>
        </tr>
        <tr>
          <td><a href="https://kongregate.com/">And if ya get 
            bored</a>
          </td>
        </tr>
      </table>
    </div>
    <div class="DIV50">
      <p class="PromiseTxt" align="right">This organization is a nonprofit organization dedicated to the spread of knowledge. Remember to always double-check your sources because even we
        <strong>aren't</strong> perfect!
      </p>
    </div>
    <div class="DIV37n5">
      <p class="PromiseTxt" align="center"> Updated about 1 minute ago
      </p>
    </div>

    <div style="clear:both;"></div>
  </div>
</footer>

Upvotes: 1

Related Questions