Help..Problem with Form within Div?

[Djsquid]

Hey Guys,

I'v started a new project recently creating the new website for my workplace, and I have made a contact page, and want to implement a contact form. I have all the HTML and CSS down to a T all works fine, but here is my problem..

All my content for the page is within a content div, which then has another div called contactuscontentholder which has a background image.

In the contactuscontenholder I have a h1 tag and P tag and then I have my form, but I no longer require the h1 and P tag just the form, but when I remove the h1 and P tag the form jumps up to the top of the contactuscontentholder and sits flush with this, and when I apply a margin or padding to the form to bring it down into position it makes the contactuscontentholder image move down with it? and I can not for the life of me stop this. I want the background image to stay put and just move my form around and add a margin-top and some padding, could someone please advise this is so frustration....

H1 and P tag have now been replaced with "space" tag as I have found this is the only way to stop it from sitting flush with the contactuscontentholder.

<div id="content">
        	<div id="contactuscontentholder">
            
            <div class="space"></div>
            
            <div id="contactform" class="myform">
            	<form id="form" name="form" method="post"    action="Home.html">
                <h1>Contact Us</h1>
                <p>Product Enquiries or just a general chat?</p>
                
                <label>Name
                <span class="small">Add your name</span>
                </label>
                <input type="text" name="name" id="name"/>
                
                <label>Email
                <span class="small">Add your Email Address</span>
                </label>
                <input type="text" name="email" id="email"/>
                
                <label>Message
                <span class="small">How can we Help</span>
                </label>
                <input type="text" name="message" id="message"/>
                
                <button type="submit">Submit</button>
                <div class="spacer"></div>
                
				</form>
            </div>

            </div>

        </div>

CSS CODE:

#content {
	width:1020px;
	height:100%;
}

#homecontentholder {
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	width:908px;
	height:796px;
	background-image:url(Images/contentholder.jpg);
}

#productcontentholder {
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	width:908px;
	height:796px;
	background-image:url(Images/contentholder.jpg);
}

#portfoliocontentholder {
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	width:908px;
	height:796px;
	background-image:url(Images/contentholder.jpg);
}

#contactuscontentholder {
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	width:908px;
	height:796px;
	background-image:url(Images/contentholder.jpg);
}

/*--------------------END OF CONTENT HOLDER STYLES -----------------------*/

/*--------------------CONTENT HOLDER H1 STYLES -----------------------*/

#productcontentholder h1 {
	font
	text-align:left;
	padding:55px;
}

#portfoliocontentholder h1 {
	text-align:left;
	padding:55px
}

/*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
/*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/

.space {
	padding:20px;
}


/*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
/*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/



#contactuscontentholder .myform {
	margin-top:25px;
	padding-left:0px;
}




/*--------------------END OF CONTENT HOLDER H1 STYLES-----------------------*/



/*--------------------HOME PAGE SLIDESHOW-----------------------*/

/* rotator in-page placement */
        div.slideshow {
	position:relative;
	height:398px;
	width:908px;
	margin-left: 0px;
}
/* rotator css */
	div.slideshow ul li {
	float:left;
	position:absolute;
	list-style: none;
}
/* rotator image style */	
	div.slideshow ul li img {
	border:1px solid #ccc;
	padding: 0px;
	background: #FFF;
}
        div.slideshow ul li.show {
	z-index:500;
}
	
/*--------------------END OF HOME PAGE SLIDESHOW-----------------------*/


/*--------------------CONTACT US FORM -----------------------*/

/*----FORM ----*/


.myform {
	margin-top:50px;
	margin-left:25px;
	width:400px;
	padding:14px;
}

/*----FORM STYLE ----*/

#contactform {
	border:solid 1px #F00;
	background:#FFF;
}

#contactform h1 {
	font-size:32px;
	font-weight:bold;
	margin-bottom:0px;
}

#contactform p {
	font-size:11px;
	color:#F00;
	margin-bottom:20px;
	border-bottom:solid 1px #F00;
	padding-bottom:10px;
}

#contactform label {
	display:block;
	font-size:25px;
	font-weight:300;
	text-align:right;
	width:140px;
	float:left;
}

#contactform .small {
	color:#F00;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:right;
	width:140px;
}

#contactform input {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #F00;
	width:200px;
	margin:2px 0 20px 10px;
}

#contactform button {
	clear:both;
	margin-left:150px;
	width:125px;
	height:31px;
	background:#CCC;
	text-align:center;
	line-height:20px;
	color:#000;
	font-size:16px;
	font-weight:bold;
}
	

/*--------------------END OF CONTACT US FORM -----------------------*/

 

[CaldwellYSR]

add padding-top to your #contactuscontentholder to push the form down however far you need it.

I'd also suggest eliminating that "space" div because it's empty and that's not the correct way to do what you're trying to do. but if you really want to utilize that space div then instead of padding you need to set it's height. Again let me stress that this is the WRONG way to achieve what you want.