CODEWITHSUNDEEP
htmlcss
Dan Cundy
Dan Cundy

Reputation: 2849

Unexpected gap right of header and footer when both are set with width:100%?

Problem

When using my phone to view a website i'm creating the site appears and seems to act differently than i expect?

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

Smartphone view

screenshot

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

Desktop view

screenshot

Header CSS

#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;
}

Footer CSS

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

}

HTML

Header

 <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 notice the background image cuts off at the same point too, so could this be an overflow issue?!

Any help or pointers would be greatly appreciated!

PS i know i haven't quite got the finer points of css like using ID's and Classes properly but i am still learning so please dont hate on me too much!

Upvotes: 4

Views: 933

Answers (5)

Dan Cundy
Dan Cundy

Reputation: 2849

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

Solution

Css

Body
{
min-width:1003px;
}

Upvotes: 0

nickspiel
nickspiel

Reputation: 5630

Change the positioning of the footer to be fixed.

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

Notice we left out the top attribute... this is because we want that to be set automatically by the height of the inner elements.

You may also want to try position: absolute; and tweak the bottom padding on the body to give a result that will clear the body content and not stick to the viewport.

This should get you heading in the right direction.

Upvotes: 0

Linek
Linek

Reputation: 1363

Do not set div to width 100%, it expands by default. What you can try is to remove width property (from footer and header) and set min-width to be the same as your content's (it is a fixed width right?).

Do you have a link to the website that we can access? It is easy to test what works with Chrome/Firefox developer tools.

Upvotes: 1

BoxMan0617
BoxMan0617

Reputation: 140

Don't float your #banner or .footer. Check this cool tutorial on positioning to get a better idea: CSS Learn Positioning

Upvotes: 0

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

This generally happens when your content isn't enough to fill up the screen. I personally use calc() to sort it out. You can try this.

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

What it does is that it calculates min-height for your_content to 100% - height of your header - height of your footer;

Upvotes: 0

Related Questions