Unable to find the cause of an annoying content gap in my HTML/CSS?

Posted by user1472747 on Stack Overflow See other posts from Stack Overflow or by user1472747
Published on 2012-07-06T15:01:44Z Indexed on 2012/07/06 15:15 UTC
Read the original article Hit count: 198

Filed under:
|
|
|

I'm quite new to CSS / HTML, and can't find the cause of this little bugger. I want it gone, so that the banner and the nav bar touch each other. Any help is greatly appreciated!!

Here is the code for the site. I took out some of the irrelevant code.

               <!DOCTYPE html>
<html>



<!-- *****CSS CODE START*****-->
<style type="text/css">

#container
{
    margin: 0 auto;
    width: 900px;
    background: #fff;

}

#header
{
    margin-top: 0px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 900px;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
    float: left;
    width: 900px;
    background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
}

#content
{
    clear: left;
    float: left;
    width: 619px;
    height: 720px;
    padding: 10px 0;
    margin: 0 0 0 0px;
    display: inline;
    overflow: auto;
}

#content h2 { margin: 0; color: #003D5D; padding:10px; }

#contentBody
{
    padding:10px;
    font-size:22px;
}

#aside
{
    float: right;
    width: 280px;
    padding: 20px 0;
    margin: 0 0px 0 0;
    display: inline;
    background: #cccccc;
    height: 700px;
    border-left: 1px solid #333 ;
}

#aside h3 { margin: 0 20px; color: #003D5D; font-family: Times New Roman; }

#asideText { margin: 0 20px; font-family: Times New Roman;}

#footer
{
    clear: both;
    background: #ccc;
    text-align: right;
    padding: 5px;
    height: 1%;
    border-top: 1px solid #333 ;
}

</style>
<!-- *****CSS CODE END***** -->





<!-- *****HTML CODE START***** -->
<body>

<div id="container">
    <div id="header">

            <img src = file:///Users/jduffy/Desktop/projectSite/banner1.jpg>
            </img>

    </div>
    <div id="navigation">
        <ul>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/home">Home</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/theProject">The Project</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/Pictures">Pictures</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/Contact">Contact us</a></li>
        </ul>
    </div>
    <div id="content-container">
        <div id="content">
            <h2>
                Page heading
            </h2>
            <div id="contentBody">
            <p>
                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page
                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page


            </p>
            <p>
                test2
            </p>
            <p>
                test3
            </p>
            </div>
        </div>
        <div id="aside">
            <div id="asideHeading">
                <h3>
                Aside Heading
                </h3>
            </div>
            <div id="asideText">
            <p>
            test5
            </p>
            </div>
        </div>
        <div id="footer">

            <text id="footerDate">0</text>


        </div>
    </div>
</div>
</body>
<!-- *****HTML CODE END***** -->

</html> 


<!-- *****JavaScript CODE START***** -->
<script type="text/javascript">

/*date*/
var today = new Date();
document.getElementById("footerDate").innerHTML = today;


</script>
<!-- *****JavaScript CODE END***** -->

© Stack Overflow or respective owner

Related posts about html

Related posts about css