Empty gap after form

Hey guys,

I'm creating a graphical subscription form widget for my site using HTML and CSS. It's over at http://www.supplementjudge.net/

As you can see, on the right hand side, there is a big gap under the form image and I am struggling to figure out what's causing it.

Below is the code I am using for the widget:

<style type="text/css">
#emailbox
{
        background: transparent;
        background-image: url(http://www.supplementjudge.net/wp-content/uploads/2012/11/background.png);
        width: 810px;
        height: 280px;
        overflow: hidden; /* Clear floats */
		position:relative;
		background-repeat:no-repeat;
}

#email-sub, #submit-sub
{
        float: left;
}


#email-sub
{
	position:absolute;
	padding: 0px 0px;
	height: 30px;
	width: 188px;
	border: 0px solid #cbc5c5;
	font: bold 14px arial, helvetica;
	color: #000;
	background: transparent;
	top: 55px;
	left: 90px;
}

/* ----------------------- */

#submit-sub
{
	position:absolute;
	background: transparent;
	top: 107px;
	left: 207px;
	border-width: 0px;
	height: 23px;
	padding: 0;
	width: 83px;
	cursor: pointer;
	font: bold 14px Arial, Helvetica;
	color: #23441e;
}

#submit-sub:hover
{
		position:absolute;
        background: transparent;
		top: 107px;
		left: 207px;
        height: 23px;
        padding: 0;
        width: 83px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;
}
</style><form id="emailbox" action="http://asgsoft.us5.list-manage1.com/subscribe/post" method="post" target="_blank">
    <input type="hidden" name="u" value="2a966d112db49b5e0fbad9ce6">
	<input type="hidden" name="id" value="4b3901a83b">
	<input type="email" value="" name="EMAIL" class="email" id="email-sub" required>
    <input id="submit-sub" type="submit" value="">
  </form>

HTML:

I would really appreciate your input on the matter

Many thanks

 

Try to change width and height properties for #email{ width:310px; height:150px; ... }
It should be good then.

 

Works great man!

Thanks