css clear right attribute problems, my images wont align correctly! Options

[smoore5527]

Hello, I'm new to posting here, and pretty new at css and html... i have a contact form that i need to put below a picture of my angies list award. i used the clear;right attribute in my css and it will let me allign it if the caption is longer than the width of the contact form... i dont know if i am making sense, so i will post the css and html below

Here it will make the allignment side to side:

<div style="clear:right; float:right; text-align:right; margin:4px;">


<a href="http://www.angieslist.com/angieslist/companylist/baltimore/kitchen-and-bath-remodeling.htm?cid=ssabadge"><img src="/images/anglist.jpg" alt="Angie's List Super Service Award Winner" width="130" height="131" border="0" /></a><br />
<a href="http://www.angieslist.com/angieslist/companylist/baltimore/kitchen-and-bath-remodeling.htm?cid=ssabadge" style="color: blue; font-weight: bold;">remodeling in Baltimore</a>
</div>

<style>
/*
#contact {
clear:right;
float: right;
padding-left:10px;
padding: 20px;
}
*/
/* - CONTACT SIDE AREA - */
/* #contact {width:145px;margin:0;padding:0;float:right;}*/
#contact {width:145px;margin-left:10px;padding:0px;float:right;}
#contact img {margin:15px 0 0 0;}
#contact p {font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#393831;text-align:left;;}
#contact p.heading {height:6px;margin:0;padding:0;border-bottom:1px solid #9c9a9c;}
#contact .title {padding:0 5px 0 0;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:/* #d7256b */ #E27907;background:#FFF;font-weight:normal;text-align:left;}


here is where it will allign up and down (notice the only change is in bold):

<div style="clear:right; float:right; text-align:right; margin:4px;">


<a href="http://www.angieslist.com/angieslist/companylist/baltimore/kitchen-and-bath-remodeling.htm?cid=ssabadge"><img src="/images/anglist.jpg" alt="Angie's List Super Service Award Winner" width="130" height="131" border="0" /></a><br />
<a href="http://www.angieslist.com/angieslist/companylist/baltimore/kitchen-and-bath-remodeling.htm?cid=ssabadge" style="color: blue; font-weight: bold;">remodeling in todays great Baltimore</a>
</div>

<style>
/*
#contact {
clear:right;
float: right;
padding-left:10px;
padding: 20px;
}
*/
/* - CONTACT SIDE AREA - */
/* #contact {width:145px;margin:0;padding:0;float:right;}*/
#contact {width:145px;margin-left:10px;padding:0px;float:right;}
#contact img {margin:15px 0 0 0;}
#contact p {font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#393831;text-align:left;;}
#contact p.heading {height:6px;margin:0;padding:0;border-bottom:1px solid #9c9a9c;}
#contact .title {padding:0 5px 0 0;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:/* #d7256b */ #E27907;background:#FFF;font-weight:normal;text-align:left;}

This post has been edited by smoore5527: Mar 8 2010, 10:49 AM

[pandy]

Considering only the HTML you have posted, 'clear' has no function at all. Do you have something before (above) it in the real page? 'clear' clears floats that come before the element for which its used. That is, it pushes the element down to where it's no longer affected by any floats that come before it.

Can you post the URL to a real page with this problem?