HTML Footer issue, div background not occupying fully

Asked May 02 '18 at 10:39

Active May 08 '18 at 12:56

Viewed 52 times

Check my Current Issue here (image attached)

enter image description here

The footer background color is not occupying fully.

The HTML COde is :-

<div class="footer">
        <p class="footer-txt-left">&copy 2017 - 2018 ccc Group Inc. All Rights Reserved.</p>
        <p class="footer-txt-right">Terms | Privacy | Service</p>
    </div>

CSS:-

.footer{
            padding: 10px;
            font-size: 14px;
            background-color: #0071ba;
        }

I want both span should be comes inside footer div (filled with blue BG color)

Below is my expected Output enter image description here

FUll CSS:-

Attached my Full CSS HERE Below

Full CSS snippet

  .footer {
    padding: 8px 20px;
    font-size: 14px;
    background-color: #0071ba;
    color: #ffffff;
    overflow: auto;
  }

  .footer-txt-right {
    float: right;
  }

  .footer-txt-left {
    float: left;
  }

<div class="footer">
  <p class="footer-txt-left">&copy 2017 - 2018 ccc Group Inc. All Rights Reserved.</p>
  <p class="footer-txt-right">Terms | Privacy | Service</p>
</div>

edited May 08 '18 at 12:56

L Y E S - C H I O U K H

4,765
8
40
57

asked May 02 '18 at 10:39

AM I IDIOT

1

I tried to run it and it full fill – לבני מלכה May 02 '18 at 10:41
But for me the background is not covered the span :( – AM I IDIOT May 02 '18 at 10:44
2

you are using float, so clear float --> `overflow:auto` on footer – Temani Afif May 02 '18 at 10:44
@TemaniAfif Good Point....missed that. – Paulie_D May 02 '18 at 10:47
@Fabio_MO did you at least check his code an question before using snippet? there is no need to convert code to snippet as it's clearly don't show the behavior – Temani Afif May 02 '18 at 10:53
@TemaniAfif where i'm using float? i have not used any float in footer css – AM I IDIOT May 02 '18 at 10:53
it was a guess ;) and it you didn't provide us with full code, so share all your code and we will see if it's float or not – Temani Afif May 02 '18 at 10:55
@TemaniAfif i have attached my full CSS, please check it – AM I IDIOT May 02 '18 at 11:00
@TemaniAfif im always facing this issues in div, teach me why so i can learn. – AM I IDIOT May 02 '18 at 11:01
and you are using float :) check the code you shared – Temani Afif May 02 '18 at 11:04
@TemaniAfif yes, to make text go left i use float left , and to make text right i used flot right in footer. Anything wrong i did? :( – AM I IDIOT May 02 '18 at 11:06
nothing wrong and as I said it's a clearing float issue .. you need to clear float – Temani Afif May 02 '18 at 11:07

HTML Footer issue, div background not occupying fully

0 Answers0