Website not displaying properly even though I have 3 container div's with width set to 100%

Question

I'm not sure what the issue here is, but its frustrating the hell out of me. I have a header div, for the logo and links, a wrapper div for the main section, and then a footer. width is set to 100% for all, but for some reason there is an overflow of white space spilling over on the right side and on the bottom. And it does this funky thing where if I move my mouse to the white space below the footer the contact link in my header is selected!

Theirs a fair bit of html and css so I decided to just link you guys to a jfiddle, it will be easier to just show you the problem in action. notice how you can scroll to the right and there is white space, even though the wrapper has background color set to grey, header has background set to white, and footer has background set to grey. all have 100% widths as well. There is even white space coming in below the footer for some reason.

I hope all this makes sense and thanks for your help. I'm sure its something silly and obvious but I'm still kind of new to this!

http://jsfiddle.net/46andtool/Q2d4K/2/

heres the main div css

/*body element*/ 

body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif;  }

/*contains #main and #footer*/

    #wrapper { width:100%; background-color:grey; border: none;}

#main { width:100%; margin: 0 auto; border: none;}/*main body of website, wrapped inside of the wrapper div*/

/*div that contains the banner and navigation*/

.header {width: 100%; margin: 0 auto;  background-color: #FFFFFF;  padding-bottom: 10px; margin-bottom: 10px;}

/*Logo*/

 #banner {float: left; max-width: 100%; margin: 0; padding: 0;}

/*navigation*/ 

#w { max-width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; } 

and the html:

<body>
 <div class="header">
    <a href="index.php"><img id="banner" src="img/******.png" alt="*******"></a>   
        <div id="w">
                <nav>
                    <ul id="ddmenu">
                        <li><a href="#">About</a>
                            <ul>
                                <li><a href="#">Our Mission</a></li>
                                <li><a href="#">The Staff</a></li>
                                <li><a href="#">History</a></li>

                            </ul>
                        </li>
                        <li><a href="#">Services</a>
                            <ul>
                                <li><a href="#">*****</a></li>
                                <li><a href="#">******</a></li>
                                <li><a href="#">******</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Links</a>
                            <ul>
                                <li><a href="#">China</a></li>
                                <li><a href="#">Japan</a></li>
                                <li><a href="#">Canada</a></li>
                                <li><a href="#">Australia</a></li>
                                <li><a href="#">South America</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.php">Contact Us</a></li>
                    </ul>
                </nav>
            </div>
        </div>


<div id="wrapper">
   <div id="main">
    <div id="innermain">
        <h1>Latest News and Events</h1>
        <h2>Welcome to !</h2>
          <p>gsfdgdfgsdfgsdfg
          </p>

         <div id="linebreak"></div> 
          <p>gfdhgdfhfgh</p>
          <br>

          <p>hgdhfghgfh</p>
          <br>

          <p>gdhfgdhfghfgh</p>
          <br>
    </div>

     <div id="rightside">
       <h1>Where To Find Us</h1>
       <a href="img/buildingpic.jpg"><div id="buildingpic"></div>  </a> 
       <div id="map_canvas"></div> 
       <p id="location">sadfasdfsadsdf<br> asdfsdfa<br> asdfdsfds<br> 555-3423</p>
    </div>
  </div>
</div>

<div id="footer">

  Site design by <a class ="links" href="example@yahoo.com">fsgfdg</a></a>&nbsp; &copy;   <?php echo date('Y');?> All Rights Reserved

</div>

</body>

Answer 1

There are a couple things causing issues here.

Your body automatically comes with a margin, so it's going to overflow if you don't specifically set the margin:0px;

Your #footer had a width:100%; but it also had padding:10px . Those are combined, so you had width:100% + 10px of padding. Try to do something like what I provided, which is width:94%; and padding:10px 3%; so your width becomes 94% + 3% + 3% = 100%

Lastly, your #buildingpic element had width:300px which in this case was wider than the container it was in. You would be better off making it width:100% and height:auto; to automatically constraint to the proportions of it's container. In this case I set the max-width:100%;

http://jsfiddle.net/Q2d4K/4/

Also, you're going to have a hell of a time if you always use IDs. Try to use classes for elements so you can re-use them if need be, or at least not have issues with duplication or priority of selection.