div not floating

[zang8027]

A client sent me a site that he designed in Microsoft word 97 (lol.. ) and wanted me to code it and add a background. So I did.

 

www.attractunlimitedleads.com

 

Now, if you scroll down to the bottom of the page, there is a form.  Now, i set up the form like such: (sorry if the formatting sucks.. copying and pasting will probably lose it)

 

<div id="aweberForm">
		<form action="http://www.aweber.com/scripts/addlead.pl" method="post">

	      <div class="labelDiv">E-Mail:</div>
                     <div class="inputDiv"><input class="boxs" type="text" name="from"></div>

	     <div class="labelDiv">Name:</div>
                     <div class="inputDiv"><input class="boxs" type="text" name="name"></div>

			<div id="bottomForm">
			<input type="submit" value="Subscribe">
			<strong><p>Please Include Valid Contact Information<br></strong>
			Your contact Information will never be sold or shared with anyone. <br>

			You can opt out at ANY time</p>
			</div>
		</form>
</div>

 

My css is:

 

#aweberForm
{
width: 670px;
height: auto;
border: 1px #ccc solid;
margin: 0 auto;

}

.labelDiv
{
width: 155px;
float: left;
background: #fff;
text-align: right;
padding-right: .1em;
border: 1px #ccc solid;
padding: .2em;
font-family: "Times new roman", times, serif;
}

.inputDiv
{
width:510px;
background: #ffffe0;
border: 1px #ccc solid;
clear: both;
padding: .2em;
}

#bottomForm
{
background: #8799cc;
text-align: center;
padding: .2em;
}

 

 

Now, the div 's that hold the input I would like to float beside the name ones. But as you can tell, that is not working. They are stacking on eachother too. If i remove the clear:both on the input div, my label divs show up as being inside the input div... which from what I can tell, is not.

 

Try messing around if you have firefox developer toolbar.. take out the clear:both and see what happens.

 

[zang8027]

i got it to pop up.. but it still stacking the div for some reason..

[laPistola]

personally when i load the page (in ie7) it looks fine, or im miss-understanding whats happening

 

Personally i would have used a table there for the form this would eliminate any stacking of div's, also i would have used the <label name="from">Email:</label> tag as well as its liked for accessabilty

[dbrimlow]

The good news is you are trying to use semantic markup and tables css.

 

The bad news is that there is SO much wrong with the most simple, basic html that how it will display from browser to browser is anyone's guess.

 

This shows the exact problems:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.attractunlimitedleads.com%2F

 

But most are because of embedding headers within paragraphs ...

 

You can't embed header tags within paragraph tags!

 

<p><h1><i>PLUS MUCH MORE!</i></i></h1></p>

 

That is just wrong. You do this on the page over and over.

 

h1 should only be used once per page - usually reserved for the "site name" at the page top - so search engines will see that YOU consider it the most important thing on the page.

 

Then use h2 - h6 headers as the need arises:

h2 - usually reserved for the "page name",

h3 - sub-headings (like, But where is the “Good Life”?)

 

Paragraphs are completely independent of headers and bullets.

 

When you want divs to be side by side float them both. Clear elements before and after floats.