Large space inside top of div (not padding)

I have just started making a new layout and I’ve got some weird space inside a div and I can’t see any reason for it.

I’ve used firebug to see what the problem is but i can’t see any reason. It’s shown in the picture where this extra space is

Any ideas what’s causing this extra space?

Here is my code so far

<html>
<head>
<style type="text/css">

body {
	background: #f2f2f2;
}

#header {
	
}

#container {
    width:1009px;
    margin:20px auto;
}

#largeimage {
    float:left;
    width:943px;
	margin: 10px 0 10px 8px;
}

#content {
    float:left;
    width:620px;
	margin: 11px 19px 0 9px;
}

#sidebar {
    float:left;
    width:304px;
}

.clearboth {
	clear:both;
}

#footer {
    clear:both;
	width: 962px;
	height:208px;border-top:1px dotted #CCCCCC;padding:10px 0;background: #373737 url(images/sniper_scope.jpg) no-repeat 15px 10px;
	margin: 10px 22px;
}

.body {
	background: url('images/body_center.png') repeat-y;
	width: 1009px;
}

.body_top {
	background: url('images/body_top.png') no-repeat;
	width: 1009px;
	padding: 0px 24px;
}

.body_bottom {
	background: url('images/body_bottom.png') no-repeat bottom;
	width: 1009px;
}

.img_top {
	background: url('images/img_top.png') no-repeat;
	height: 8px;
	width: 943px;
}

.img_center {
	background: url('images/img_center.png') repeat-y;
	width: 943px;
}

.img_pad {
	margin: 2px 8px 2px;
}

.img_bottom {
	background: url('images/img_bottom.png') no-repeat;
	height: 15px;
	width: 943px;
}

#contentimg {
	border: 1px solid #CECECE;
}

.content_item_top {
	background: url('images/content_item_top.jpg') no-repeat;
	width: 623px;
}

.content_item {
	background: url('images/content_item_centre.jpg') repeat-y;
	width: 623px;
}

.content_item_pad {
	padding: 10px 22px;
}

.content_item_bottom {
	background: url('images/content_item_bottom.jpg') no-repeat;
	height: 9px;
	width: 623px;
}

.sidebar_item_top {
	background: url('images/sidebar_item_top.jpg') no-repeat;
	height: 39px;
	width: 304px;
}

.sidebar_item {
	background: url('images/sidebar_item_centre.jpg') repeat-y;
	width: 304px;
}

.sidebar_item_pad {
	margin: 5px 26px 12px;
}

.sidebar_item_bottom {
	background: url('images/sidebar_item_bottom.jpg') no-repeat;
	height: 9px;
	width: 304px;
}

ul.footerlist {
	float:left;
	list-style-type:none;
	padding:20px 16px;
}

ul.footerlist li {
	font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
	font-size:10px;
	color: #373737;
}

#footer h5 {
	font-size:120%;
	color: #E5DFCA;
}

#footertop, #footerbottom {width:710px;float:right;}
#footerbottom p{font-size:11px;color:#f0f0f0;font-style:normal;font-weight:normal;margin:0;padding:0px;line-height:20px;text-align:left;}
#footertop a{color:#f0f0f0;text-decoration:none;}
#footertop a:hover{color:#c3c3c3;text-decoration:underline;}

h1 {
	margin:0;
}
</style>
</head>
<body>
<div id="container">
	<div class="body">
		<div class="body_bottom">
			<div class="body_top">
				<div id="header">
					<img src="images/banner.jpg" />			
				</div>
				<div id="largeimage">
					<div class="img_center">
						<div class="img_top"><h4></h4></div>
						<div class="img_pad">
							<div id="contentimg"><img src="images/contact-us.jpg" alt="contact us" title="contact us" /></div>
						</div>
						<div class="img_bottom"></div>
					</div>
				</div>
				<h1>Contact US</h1>
				<div id="content">
					<div class="content_item">
						<div class="content_item_top"><h4></h4>
							<div class="content_item_pad">
								<p>Get updates for our latest news, events and blogs.</p>
								<form id="addressform" action="/" method="get">
									<div class="textl1"><label id="namLbl" for="mlName">Name</label><input type="text" id="mlName" name="mlName" /></div>
									<div class="textl1"><label id="emlLbl" for="mlEmail">Email</label><input type="text" id="mlEmail" name="mlEmail" /></div>
									<div class="textr1"><input type="submit" id="mlbutton" name="mlbutton" value="" class="button-signup" /></div>
									<p id="response" style="text-align: left"></p>
								</form>
							</div>
						</div>
						<div class="content_item_bottom"></div>
					</div>
				</div>
				<div id="sidebar">
					<div class="sidebar_item">
						<div class="sidebar_item_top"><h4></h4></div>
						<div class="sidebar_item_pad">
							<p>Get updates for our latest news, events and blogs.</p>
							<form id="addressform" action="/" method="get">
								<div class="textl1"><label id="namLbl" for="mlName">Name</label><input type="text" id="mlName" name="mlName" /></div>
								<div class="textl1"><label id="emlLbl" for="mlEmail">Email</label><input type="text" id="mlEmail" name="mlEmail" /></div>
								<div class="textr1"><input type="submit" id="mlbutton" name="mlbutton" value="" class="button-signup" /></div>
								<p id="response" style="text-align: left"></p>
							</form>
						</div>
						<div class="sidebar_item_bottom"></div>
					</div>
					
				</div>
				<div class="clearboth"></div>
			</div>
		</div>
	</div>
    <div id="footer">

    </div>
</div>
</body>
<html>

HI,

If you are talking about the section marked in yellow on your drawing then that’s the margin you added here.



#content {
    float: left;
 [B]   margin: 11px 19px 0 9px;[/B]
    width: 620px;
}

Or did you mean something else?

BTW don’t forget your doctype.

You also have ane empty h4 taking up space inside the div.


<div class="content_item_top">
<h4></h4>
					

Thanks Paul. It was the empty <h4> adding the extra space. I forgot they were there. Took them out and it disappeared.

I’ve added more doctype as I want the w3 validator to tell me if there was any extra divs or something in there that shouldn’t be but all came back fine