Bottoms of the page do not match across pages

I have two pages that use the same css but seem to look different. Here they are:

128.48.204.195:3000
128.48.204.195:3000/formats

You can see that below the footer, the /formats file has no extra space, and the other file has about 50 pixels of extra space towards the bottom after the footer. Do you know why that happens? As far as I can tel开发者_JAVA技巧l, they use the same css.

Here is the css for the divs that I think are affecting this:

div#container
{
    width:70%; /* Controls the with of the page */
    margin: auto; 
  float: middle;
    text-align:center;
    /*padding: 1%;*/
    border:1px solid #333;
    background-color:#eee;
}

div#header
{
  text-align:center;
  padding:10px;
}

Thanks!

---

You have a min-height set on the content css class. Which is applied to your wrapper div. Remove or change the min height and it'll get rid of the extra space.

<div id="layout1" class="yui-t6 content"> 

---

The problem is here:

<div class="yui-t6 content" id="layout1">


       <h1><center>Welcome to the UDFR Project</center></h1>
    <p></p>
    <p>Find me in app/views/home/index.html.erb</p>
    <p>    
    </p>
    <p>
      User Id (testing MySQL call): 1

    </p>

    <p>


  </p><div id="footer">
     <hr>
     <center>Team | About Us | Purpose | How You Can Help | CDL </center>
  </div> <!-- End of footer --> 

</div>

The /formats page has no layout div, so it doesn't have all the same css rules applied. The css rule affecting the bottom part specifically is under .content {min-height: 20em;} Change that to reduce the height.

As a side note, I think what you were going for is more like this:

    <h1><center>Welcome to the UDFR Project</center></h1>
<div class="yui-t6 content" id="layout1">
    <p></p>
    <p>Find me in app/views/home/index.html.erb</p>
    <p>    
    </p>
    <p>
      User Id (testing MySQL call): 1

    </p>

    <p>


  </p> 
</div>
<div id="footer">
     <hr>
     <center>Team | About Us | Purpose | How You Can Help | CDL </center>
  </div> <!-- End of footer --> 

</div>

Moving the content stuff in between the header and footer rather than containing them.