Divs not postioned well in main div

[Abdlah]

I am new to CSS and I am having problems with my code. I have created these CSS rules and applied them to the code that follows after the rules.

My intention is to have all my divs line up in a straight line within the searchresultscontainer div. But when I check my results in the browser, none of them are positioned correctly. What am I not getting right?

.searchresultscontainer{
width:800px;
height:62px;
border-style:solid;
border-color:#FF0000;}



.searchresultsimg{
position:absolute;
width:100px;
height:60px;
background-color:#CCCCCC;
float:left;
left:0px;
border-style:solid;
border-color:#9966CC;
}

/*.searchresultsdetail{
position:relative;
width:700px;
height:61px;
text-align:center;
background-color:#CCCCCC;
float:right;
left:101px;
margin:0;
padding:0;
}*/

.productdescription{
position:absolute;
width:300px;
height:36px;
text-align:left;
float:left;
left:101px;
margin:0;
padding:10;
border-style:solid;
border-color:#FFCC00;
}

.productmodelno{
position:absolute;
width:100px;
height:36px;
text-align:left;
float:left;
left:401px;
margin:0;
padding:10;
border-style:solid;
border-color:#996600;
}

.productmodelyear{
position:absolute;
width:100px;
height:36px;
text-align:left;
float:left;
left:501px;
margin:0;
padding:10;
border-style:solid;
border-color:#00FF00;
}

.productprice{
position:absolute;
width:100px;
height:36px;
text-align:left;
float:left;
left:601px;
margin:0;
padding:10;
border-style:solid;
border-color:#000033;
}

.productuserid{
position:absolute;
width:100px;
height:36px;
text-align:left;
float:left;
left:701px;
margin:0;
padding:10;
border-style:solid;
border-color:#990000;
}

xhtml code to which CSS are applied:

<div class="searchresultscontainer">
<div class="searchresultsimg"><!--- creating a resized version of uploaded image of product --->
<cfimage source="#ExpandPath('images/consumer/#Cnsmr_ProductIMAGE#')#" action="resize" width="100" height="60" name="resizedImg" format= "jpg">
<cfimage source="#resizedImg#" action="writeToBrowser"><!---img src="images/consumer/#Cnsmr_ProductIMAGE#"--->
</div>

<div class="productdescription"><font size="+2">#Cnsmr_ProductDESCRIPTION# </font>&nbsp; <font size="+2"></div>

<div class="productmodelno"><a href="showProductDetail.cfm?Cnsmr_ProductCountID=#URLEncodedFormat(TRIM(Cnsmr_ ProductCountID))#">#Cnsmr_ProductMODELNo# </font>&nbsp;</a></div> 

<div class="productmodelyear"><font size="+2">#Cnsmr_ProductMODELYEAR# </font>&nbsp;</div> 

<div class="productprice"><font size="+2">#Cnsmr_ProductPRICE#</font>&nbsp;</div> 

<div class="productuserid"><font color="#000066#" size="+2">#User_id#</font></div>

</div> <!--- end of searchresultscontainer --->

A would appreciate any help on how to correct this. TIA

[sreein1986]

Please check below code. and let me know if it is working

.searchresultscontainer{
	width:1520px;
	height:62px;
	left:14px;
	border-style:solid;
	border-color:#FF0000;
}



.searchresultsimg{
	position:absolute;
	width:100px;
	height:55px;
	background-color:#CCCCCC;
	float:left;
	left:14px;
	border-style:solid;
	border-color:#9966CC;
	top: 19px;
}

/*.searchresultsdetail{
position:relative;
width:700px;
height:61px;
text-align:center;
background-color:#CCCCCC;
float:right;
left:101px;
margin:0;
padding:0;
}*/

.productdescription{
	position:absolute;
	width:292px;
	height:52px;
	text-align:left;
	float:left;
	left:118px;
	margin:0;
	padding:10;
	border-style:solid;
	border-color:#FFCC00;
	top: 19px;
}

.productmodelno{
	position:absolute;
	width:344px;
	height:57px;
	text-align:left;
	float:left;
	left:461px;
	margin:0;
	padding:10;
	border-style:solid;
	border-color:#996600;
	top: 19px;
}

.productmodelyear{
	position:absolute;
	width:100px;
	height:51px;
	text-align:left;
	float:left;
	left:816px;
	margin:0;
	padding:10;
	border-style:solid;
	border-color:#00FF00;
	top: 21px;
}

.productprice{
	position:absolute;
	width:100px;
	height:36px;
	text-align:left;
	float:left;
	left:1159px;
	margin:0;
	padding:10;
	border-style:solid;
	border-color:#000033;
	top: 20px;
}

.productuserid{
	position:absolute;
	width:100px;
	height:36px;
	text-align:left;
	float:left;
	left:1416px;
	margin:0;
	padding:10;
	border-style:solid;
	border-color:#990000;
	top: 19px;
}

[Abdlah]

This did not resolve my issue. the first two divs lined up properly, the second two did not line up but also overlapped each other and the last two did not line up and are separate, each standing alone.

Above all, all the divs are outside the main div.

[MidiMagic]

You have tangled tags.

Your font tags are not nested entirely inside or entirely outside the div tags. Tag soup always throws the browser into quirks mode. Quirks mode makes divs go crazy.

You need to align your tags like this:

<div>
  <font>
    <div>
      ....
    </div>
  </font>
</div>

The following does NOT work

<div>
  <div>
    <font>
      ....
    </div>
  </font>
</div>

Also, the font tag is deprecated. Use the div tag or the span tag with CSS instead.