1.

Solve : Blank Space between Divs?

Answer» HEY CH forums.  Been a while.

I'm writing a webpage and I've run into something that I CANNOT figure out.

here's the LIVE site:  http://thomasrandolph.info/testing

The issue is the blank area just above the footer.  A look at the source shows this:

Code: [Select]<div id="aboutme">
    <div class="container">
        <div class="content">
        My name is Tom Randolph.
            <br />
            This is my website.
            <br />

            It's broken, so be nice: it's not live yet.
        </div>
    </div>
</div>

<div class="footer">
}
    <a href="index.php">Home</a>
    {}
    <a href="projects.php">Projects</a>
    {}
    <a href="BLOG.php">Blog</a>

    {}
    <a href="extra.php">About Site</a>
    {
    <br />
    <a href="http://www.thomasrandolph.info">thomasrandolph.info</a> &copy; 2009 Thomas Randolph
</div>
</div>
</body>
</html>
As you can see, there is literally nothing but one space between the content and the footer.

The CSS for the page is also in the source, and the applicable sections are:

Code: [Select]/*-----about me-----*/
#aboutme {
margin: 0;
position: relative;

top: -165px;
left: 1px;
}

#aboutme .container{
margin-left: 1px;
}

#aboutme .container .content {
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size:12px;

background:#CCCCFF;

height: 400px;
padding: 45px 0px 0px 255px;
margin: 0px 4px 0px 4px;

-moz-border-radius:35px;
-moz-box-shadow: 0px 5px 5px #666677;

-webkit-border-radius: 35px;
-webkit-box-shadow: 0px 5px 5px #666677;

z-index:0;
}

#aboutme .container .content h1 {
margin: 0;
}
/*-----end about me-----*/

/*-----footer-----*/
.footer {
background-image: url(images/footer_bg.jpg);
background-repeat: repeat-x;
text-align: CENTER;

padding: 4px 4px 4px 4px;
margin: 10px 0px 0px 0px;

height: 40px;

-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
/*-moz-box-shadow: 0px -5px 5px #666666;*/

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
/*-webkit-box-shadow: 0px -5px 5px #666666;*/

position: absolute;
bottom: 0;
width: 100%;

}

/*-----end footer-----*/

I can't figure out where the space is coming from, and any help would be appreciated.  If you need any more info, let me know.

By the way, I'm building the page with PHP, so if that could be pulling in some ERRORS somewhere or something...?

The gap isn't "noticeable" on almost all of the pages, because the footer is specifically placed at the bottom of the page.  In the "Polls" page, however, it is still a particular distance from the bottom of the content div above it, and causes the scrollbars to be unnecessarily large.  If there was no gap, the scrolling would be almost unnecessary.

I'm not so worried about the scrollbars so much as a gap that I can't find the source of.

-rock


Discussion

No Comment Found

Related InterviewSolutions