A gap between two divs. How do I solve this?

HTML & CSS
1

I have a gap between two divs. Can someone please have a look at what I have provided here, and tell me how I can solve this problem? Here is an example of the gap. I have only tested this in Chrome so far. The gap is between the wrap and breadcrumbs divs. Thanks in advance.

Here is my html:

<div id="wrap">
			<div id="image">
				<img alt="contact header" height="263" src="images/contactheader.jpg" width="900" />
			</div>
		</div>
		
		<div id="breadcrumbs">
			<p>You are here: <a href="index.htm" title="Home page">Home</a> > Contact</p>
		</div>

Here is my css:


html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	text-align:center; /* center #pageWrapper IE 5.x */
	font:normal 80%/140% arial,helvetica,sans-serif;
	background: url('images/mainbg.gif') no-repeat 50% 18%;
	color: #000;
}

#pageWrapper {
	width:900px;
	margin:0 auto;
	text-align:left;
	overflow:hidden;
}

#image {
	position: relative;
	overflow: hidden;
	margin-top: 2em;
}

#wrap {
	overflow: hidden;
	width:900px;
	position:relative;
	margin-top: 6em;
}

#breadcrumbs {
	background: #478CBD;
	color: #FFF;
	padding: 5px;
}
2

Because we don’t have the images, it’s not certain what the problem is, but you probably need this in your CSS file:

#image img {vertical-align: bottom;}

(Images are inline elements, meaning that they will sit beside any text. By default, the image aligns its bottom to the baseline of the text, leaving room below for the text descenders (even if there aren’t any. Setting it to vertical-align: bottom removes that default gap at the bottom.)

If this is just a background image, though, I wouldn’t put it in the HTML like that anyway.

3

Perfect that fixed the problem.