Aligning elements text, pic, and form

Hello Pointguards,

I’ve been wrestling with this code off and on for too long. Can anyone shedd some light on my code darkness?

I want to align these three parts/elements horizontally in my footer section, text, web form, and eBook cover.

http://healthyrant.com

Here is my html:

<div id="content">
<div id="footerhomepageoptin">
<h3>Five Habits To Transform Your Health And Lose Weight.</h3>
<div class="copy">
<p ><b>Get Your Copy Now.  You'll Discover...</b></p>
 <ul>
<li>To drop the idea of dieting.</li></indent>
       <li>Simple ways to increase energy, stamina, and longevity.</li>
       <li>A mystery chemical essential for health and life.</li>
       <li>Easy ways to reduce stress and live the life you want.</li>
</ul>
</div>

<div id="squeezeform">
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" target="_new" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="2133042732" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="scottcarson" />
<input type="hidden" name="redirect" value="http://healthyrant.com/thank-you-for-subscribing/" id="redirect_1e49f7e90689e69fec299654f74399a3" />
<input type="hidden" name="meta_adtracking" value="My_Web_Form_for_Healthy_Rant_footer" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="email||Your Primary Email" />
</div>
<div id="af-form-2133042732" class="af-form"><div id="af-body-2133042732" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-14932778"></label>
<div class="af-textWrap"><input class="text" id="awf_field-14932778" type="text" name="email" value="Your Primary Email" tabindex="500"  onfocus=" if (this.value == 'Your Primary Email') { this.value = ''; }" onblur="if (this.value == '') { this.value='Your Primary Email';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Download" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-2133042732" class="af-footer"><div class="bodyText"><p style="text-align: left;"><span style="font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif; line-height: 12px;">Your information will not be shared with anybody - ever.</span></p>
</form>
</div>

<div class="cover"></div>
<div style="overflow: auto;"><img src=" http://healthyrant.com/wp-content/uploads/2010/10/3D-5Habits-155-option-2-012810-2-e1288473998142.jpg " style="float: right;" hspace="25" />
<div style="clear both;"></div>
</div>

And the related CSS:

/* e-book stuff */

#footerhomepageoptin{
background-color: #F4F4F4;
border: 1px solid #CCC;
margin: 10px 10px 15px 10px
position: relative;
width: 919px;
}
#footerhomepageoptin h3 {
background: #062855 none repeat scroll 0px 0px;
color: white;
font: normal normal normal 18px/normal Arial, Tahoma, Helvetica, san-serif;
padding: 2px 10px;
text-shadow: black 1px 1px 0px;
}



#footerhomepageoptin
.copy {
float: left;
padding-left: 10px;
padding-right 10px
width:300px;
}

#footerhomepageoptin
#squeezeform {
background-color: white;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
float: center;
height: 100%;
padding: 20px 20px 0px;
width: 250px;
}


#footerhomepageoptin
.cover {
background: transparent url (http://healthyrant.com/wp-content/uploads/2010/10/3D-5Habits-155-option-2-012810-2-e1288473998142.jpg) no-repeat 100%  0%;
float: right;
height: 202px;
left: 450px;
position: relative;
top: -10px;
width: 190px
}

Next time you post code, wrap

 tags around it.  For now, hit the orange flag/report post at the bottom of your post (under your name, left side) and type in "wrap code in code tags" and someone will be able to edit that for you.

Any reason #squeezeform isn't floated? *edit ah, float: center doesn't exist.  Because you have a set width, you can actually float all three to the left.  Just set wide enough widths on them (but small enough to still fit in the footer).  You've floated the first box, copy, but just floating that isn't enough.  And yet because the squeezeform hasn't cleared the float, it's actually reaching up to touch the top of the footer.  Just, all the inline content inside it can see the float and are sitting underneath it.  You'll see this if you give #squeezeform an ugly background colour.

I'm not sure who the third one is you want centered, there are two main boxes in the footer, but you want to float everyone and make sure the footer encloses its floats (overflow: hidden on the footer is a popular way to do it). *edit oh the image.  

Don't bother with relative positioning.  You can do this with floats, margins and padding.  Relative positioning just complicated things unnecessarily here.

See what you get.  Also to make the shorter elements seem "even" you could give them some top padding (or margin) to them.  So, manual vertical centering.

Oh, as a sidenote:
the background image: is it supposed to be background-position: fixed?
and the text under your name:
"I want to change that . I'm now..." the fullstop.

Stomme,

Thanks so much for the help. I think I understood most of what you said but this (and the text under your name: “I want to change that . I’m now…” the fullstop.)

It’s lining up a bit now. I’m still working on getting my “Your Primary Email” area more centered and bold, and bringing the statement “Your information…” up under the download now button.

Here’s what I’ve got so far. Thanks again for the tips.

  HTML 

<div id="content">
<div id="footerhomepageoptin">
<h3>Five Habits To Transform Your Health And Lose Weight.</h3>
<div class="copy">
<p ><b>Get Your Copy Now.  You'll Discover...</b></p>
 <ul>
<li>To drop the idea of dieting.</li></indent>
       <li>Simple ways to increase energy, stamina, and longevity.</li>
       <li>A mystery chemical essential for health and life.</li>
       <li>Easy ways to reduce stress and live the life you want.</li>
</ul>
</div>

<div id="squeezeform">
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" target="_new" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="46409187" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="scottcarson" />
<input type="hidden" name="redirect" value="http://healthyrant.com/thank-you-for-subscribing/" id="redirect_c8e7797041c67b9ccd6496987c41692d" />

<input type="hidden" name="meta_adtracking" value="My_Web_Form_for_Healthy_Rant_footer" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />

<input type="hidden" name="meta_tooltip" value="email||Your Primary Email" />
</div>
<div id="af-form-46409187" class="af-form"><div id="af-body-46409187" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-15425157"></label>
<div class="af-textWrap"><input class="text" id="awf_field-15425157" type="text" name="email" value="Your Primary Email" tabindex="500"  onfocus=" if (this.value == 'Your Primary Email') { this.value = ''; }" onblur="if (this.value == '') { this.value='Your Primary Email';} " />
</div><div class="af-clear"></div>
</div>
<p>
<input id="button" type="submit" value="Download Now" name="submit">
</p>
<div class="af-element">
<div class="bodyText"><p><span style="font-size: 11px; font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif; line-height: 10px;">Your information will not be shared with anybody - ever.</span></p></div><div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=LGwsDJyMHOw=" alt="" /></div>
</form>
</div>

<div class="cover"></div>
<div style="overflow: hidden;"><img src=" http://healthyrant.com/wp-content/uploads/2010/10/3D-5Habits-155-option-2-012810-2-e1288473998142.jpg " style="float: left;" hspace="90" />
<div style="clear both;"></div>
</div>

CSS
/* e-book stuff */

#footer {
background-color:  #FFFFFF;
border-top:  3px solid black;
clear: both;
font-size:  11px;
padding:  10px;
}

#footercontainer {
margin:  0px  auto;
width: 970px;
}

#footer  {
font-size:  11px
}

#footerhomepageoptin {
background-color: #FFFFFF;
border: 1px solid #CCC;
margin: 0px 0px 0px 0px
position: fixed;
width: 919px;
}

#footerhomepageoptin h3 {
background: #062855 none repeat scroll 0px 0px;
color: white;
font: normal normal normal 18px/normal Arial, Tahoma, Helvetica, san-serif;
padding: 2px 10px;
text-shadow: black 1px 1px 0px;
}

#footerhomepageoptin
.copy {
float: left;
padding-left: 25px;
paddind-right: 50px
height: 29px
width:250px;
}

#footerhomepageoptin
#squeezeform {
background-color:  white;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
float: left;
padding-left: 10px;
height: 125px;
left: 255px;
width: 185px;
}

#footerhomepageoptin #button {
background: #DEDEDE;
border: 4px solid red;
color: black;
font-size: 14px;
font-weight: bold;
padding: 5px;
text-decoration: underline;
width: 175px;
}

#footerhomepageoptin
.cover {
background: transparent url (http://healthyrant.com/wp-content/uploads/2010/10/3D-5Habits-155-option-2-012810-2-e1288473998142.jpg) no-repeat 100% 0%
float: left;
height: 50px
left: 300px
top: -10px
width:150px
}