Why did this work?

Head out to http://www.hihatwebdesign.com/Trinity/header.php

I had a gap between my header graphic and my navbar. But then I added "float:left" to the navbar and the gap went away.

Why?

Here's my stylesheet:

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#202740;
}

#body_tray {
position:relative;
width:997px;
height:800px;
margin:auto;
padding:25px;
}

#header {
position:relative;
margin:auto;
height:236px;
width:997px;
background-image:url(images/header.png);
background-repeat:none;
z-index:-1;
}

#search_box {
position:absolute;
z-index:2;
margin-left:820px;
margin-top:175px;
}

#nav_bar {
float:left;
position:relative;
margin:auto;
width:997px;
height:38px;
background-image:url(images/nav_bar.png);
background-repeat:no-repeat;
}

#navcontainer ul {
margin-top: 5px;
padding: 0;
list-style-type: none;
}

#navcontainer ul ul {
display: none;
margin-left: 0;
padding: 0;
width: 200px;
position: absolute;
background: #ffffff;
z-index:10;
border-style:solid;
border-width: thin;
border-color:#cccccc;
}

#navcontainer ul li:hover > ul 
{
display: block;
}

#navcontainer ul li { 
display: block;
float:left; 
}

#navcontainer ul li a
{
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 18px;
color:#493417;
font-weight:bold;
text-decoration: none;
padding-left:45px;
padding-right:40px;
display:block;
}

#navcontainer ul li a:hover
{
color: #4b7235;
}

#navcontainer ul ul li a {
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 16px;
color:#493417;
padding-left:5px;
}

#navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}



#body_block {
position:relative;
width:997px;
height:485px;
background-image:url(images/body_block.png);
background-repeat:none;
z-index:-2;
}

#body_text {
position:absolute;
width:704px;
height:482px;
margin-left:267px;
margin-top:5px;
background-color:#cccccc;
}

#left_column {
position:absolute;
width:230px;
height:503px;
margin-left:25px;
margin-top:5px;
}

#cursor {
position:absolute;
float:left;
width:13px;
height:25px;
background-image:url(images/cursor.png);
background-repeat:none;
margin-top:150px;
margin-left:125px;
z-index:2;
}

#left_nav {
display:inline-block;
position:absolute;
width:230px;
height:329px;
margin-left:25px;
margin-top:180px;
background-image:url(images/left_column_background.png);
background-repeat:none;
}


#footer {
position:relative;
height:26px;
width:997px;
margin:auto;
}

input.login_box{
   border:0px;
  width:109px;
  height:21px;
  font-size: 10px;
  color: #cccccc;
  display: inline;
}

a.staff {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_light.png);
background-repeat:no-repeat;
}

a.staff:hover {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_dark.png);
background-repeat:no-repeat;
}

a.directions {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_light.png);
background-repeat:no-repeat;
}

a.directions:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_dark.png);
background-repeat:no-repeat;
}

a.times {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_light.png);
background-repeat:no-repeat;
}

a.times:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_dark.png);
background-repeat:no-repeat;
}

a.directory {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_light.png);
background-repeat:no-repeat;
}

a.directory:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}

a.pastor {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_light.png);
background-repeat:no-repeat;
}

a.pastor:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}


a.campus {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_light.png);
background-repeat:no-repeat;
}

a.campus:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_dark.png);
background-repeat:no-repeat;
}

Open in new window

brucegustPHP DeveloperAsked:
Who is Participating?
 
Julian HansenCommented:
I don't see that - if I take the float: left out - it actually brings the content window 1px closer to the nav bar.
There should be no gap between the div unless you have something inside the div that has a margin that is then causing the parent element to have a gap.

You can also try putting overflow:hidden in the parent - that also sorts out those sorts of problems
0
 
brucegustPHP DeveloperAuthor Commented:
Is it because the two elements in question are typically displayed inline, thus the float compels the second element to go under the first, much like what you see if you had a series of <li>'s and you incorporated the "float:left" dynamic, thus giving you what you see in a pulldown menu.

Correct?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That is a bandaid solution.  There are many other issues with this page. I would start by getting the page to validate.  http://validator.w3.org/
screenshot
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.