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

Question

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***** -->

Why are you linking images to local url? like file:///Users/jduffy/Desktop/projectSite/ — Skatox, Jul 06 '12 at 15:05
@user1472747: On a bright note, for a beginner, you're doing pretty good. Commenting, indentations, it looks like you've got a good grasp on some basics that others never grasp. — Brant, Jul 06 '12 at 18:05

score 2 · Accepted Answer · answered Jul 06 '12 at 15:12

2

Just add

#header img {
    float:left; 
}

to your CSS.

answered Jul 06 '12 at 15:12

WolvDev

3,182
1
17
32

score 2 · Answer 2 · edited May 23 '17 at 12:19

2

Use display: block on your header img.

more information: There is a 4px gap below canvas/video/audio elements in HTML5

edited May 23 '17 at 12:19

Community

1
1

answered Jul 06 '12 at 15:19

Guillaume86

14,341
4
53
53

score 0 · Answer 3 · answered Jul 06 '12 at 15:21

0

ShogunArts.de's answer -

#header img {
    float:left; 
}

Basic Bridge's answer -

#header { margin-bottom: -5px; }

Guillaume86's answer -

#header img {
    display:block; 
}

All worked perfectly! Thanks guys.

answered Jul 06 '12 at 15:21

user1472747

529
3
10
25

score -1 · Answer 4 · answered Jul 06 '12 at 15:14

-1

This is invalid HTML:

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

Should be:

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

While the quotes may not be necessary depending on version/type of markup the image tag is always self closing.

Whenever you have weird layout bugs start your trouble shooting with validated HTML:

http://validator.w3.org/

answered Jul 06 '12 at 15:14

iambriansreed

21,935
6
63
79

good remark but not an answer, fixing the html do not fix the inline element gap behavior – Guillaume86 Jul 06 '12 at 17:38

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

4 Answers4