The H3 element below is pushed down the height of the div to its left, even though they both have 0 margins on eachother's facing sides, and no matter what their widths are set to. Only removing the div element let's the h3 move to the top, which is where i want it. Have tried removing their borders, changing their widths and left margins, but still only removing the div box clears the unwanted white space above the h3. Do they really have to be floated to avoid this, even though they don't even touch against each other?


Code below is original code simplified, the original code validates.

Code:
<head>
<style>


div
{ 
 width: 163px;
 height: 111px;
 margin-left: 30px;
 border: 1px solid;
}


div.PatchIntro
{

}

h3
{
 width: 223px; 
 padding: 0; 
 margin: 0  62em 0 300px;
 border: 1px solid;
 font-size: 11px;
}

div.PatchIntro h3 span
{
 font-size: 10px;
 color: #fff;
 text-align: center;
 margin: 0;
}

div.keyboard
{
 width: 200px;
 margin: 0 5px 0 0;
}

</style>
</head>

<body>

<div> &nbsp; </div>


<h3>This</span></h3>

</body>

</html>