An unexpected gap in the right header and footer when both are set to width: 100%?

Question

Problem

When using my phone to browse a website, I create a website and seems to act differently than I expect?

I have a screenshot to demonstrate the problem on the smartphone screen.

Type of smartphone

As you can see, both the header and footer do not expand 100% in width, as it should, and they do this when viewed using a desktop browser.

Desktop

CSS header

#banner {

    background-image: url(images/images/bannersketchBG.jpeg);
    float: left;
    height: 100px;
    width: 100%;
    font-size: 36px;
    font-style: italic;
}

#banner1 {
    float: left;
    height: 50px;
    font-style: normal;
    margin-top: 10px;
    padding-left: 10px;
    color: #FFF;
    font-size: 24pt;
    top: 0px;
}

#banner2 {
    float: left;
    height: 30px;
    width: 410px;
    font-size: 14pt;
    font-style: italic;
    padding-left: 30px;
    color: #FFF;
}

CSS footer

.footer {
    background-color: #2E2E2E;
    word-spacing: normal;
    float: left;
    color: #FFF;
    font-weight: bold;
    width: 100%;
    height: 100px;
    bottom: 0px;

}

HTML

Headline

 <div align="center">
          <div id="banner">
          <div id="logo"><img src="images/Joel-Compass-black.png" width="119" height="95" alt="CCFS"></div>
            <div id ="banner1">Columbus Car Finder Group</div>
            <div id ="banner2">"Exploring your Needs"</div>
          </div>
        </div>

footer

<div class="footer">

<div class="footercontainer">


   <div id="footerTabsContainer">
     <div class='tab one'>
        <ul>
          <li><a href="#">Find My Car</a></li>
        </ul>
     </div>
      <div class='tab two'>
        <ul>
          <li><a href="#">About Us</a></li>
        </ul>
      </div>
      <div class='tab three'>
        <ul>
          <li><a href="#">How it Works</a></li>
        </ul>
      </div>
       <div class='tab three'>
        <ul>
          <li><a href="#">How it Works</a></li>
        </ul>
      </div>
      <div class='tab five'>
        <ul>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
      <div class='tab six'>
        <ul>
          <li><a href="#">Home</a></li>
        </ul>
     </div>

    </div>
    <div class="footerinfo">Web Design - <a href="index.html">CundyTech </a>&nbsp;&nbsp;&nbsp;&nbsp;Copyright South West Car Finder 2013</div>
     </div>

    </div>

I noticed that the background image is turning off at the same point, so this could be an overflow problem ?!

Any help or pointers would be greatly appreciated!

PS , CSS, ID , , , , !

Answer 1

div 100%, . width ( ) , ( ?).

-, ? , Chrome/Firefox.

Answer 2

, , . calc() . .

.your_header{
  height:100px;
}
.your_content{
  min-height:calc(100% - 300px);
}
.your_footer{
  height:200px;
}

, , min-height your_content 100% - - ;

Answer 3

#banner .footer. , : CSS Learn Positioning

Answer 4

, .

positioning: fixed; // will make the footer stick to the base of the viewport.
right: 0; // fill space to right
bottom: 0;  // stick to the bottom of page
left: 0; // fill space to left

, ... , , .

position: absolute; , , .

.

Answer 5

As @Linek mentioned in his answer, in the comments, adding a minimum width style to the body will solve this problem. I also had to add min-width to the header, not sure why the body did not do both, though?

Decision

Css

Body
{
min-width:1003px;
}