Floating and keeping divs inline

[zaniac 0]

Hi all!I'm trying to float 2 divs(#pp & #pd) beside each other in alignment. Both of which contain a <h3>, <p> and a <table>. I can get #pd move to the right using 'float: right'. However, in doing this #pp remains slightly higher up on the page than #pd.Below is the coding:(css)

#pp{ 	 height: 250px;	 width: 375px;	 margin-left: 30px;	 padding-top: 20px;	 border: 1px black solid;	 }		   #pp table{		  width: 350px; 		  cellpadding: 5px; 		  cellspacing: 10px;		  text-align: center;		  }		  #pp td{		border: 1px solid  #000000;		background-color: #FFFFCC;		}#pd{	height: 250px;	float: right;	width: 300px;	margin-right: 30px;	padding-top: 20px;	border: 1px black solid;	}	#pd table{	 	  width: 275px;		  cellpadding: 5px; 		  cellspacing: 10px;		  text-align: center;		  }#pd td{		border: 1px solid  #000000;		background-color: #FFFFCC;		}

(HTML)

<div id="box">  	<div id="pd">	<h3>Payment Details</h3>	<table>	<tr>	<td><h4>Method</h4></td><td><h4>Accepted/Preferred</h4></td>	</tr>	<tr>	<td>Paypal</td><td>Preferred</td>	</tr>	<tr><td>Postal Order</td><td>Accepted</td>	</tr>	</table>	<p>Payment for this auction is accepted by the above methods.</p>	</div>	   <div id="pp">	<h3>Post & Packaging</h3>	<table>	<tr>	<td><h4>Country</h4></td><td><h4>Delivery Option</h4></td><td><h4>Cost</h4></td>	</tr>	<tr>	<td>UK/Ireland</td><td>1st Class</td><td>£</td>	</tr>	</table>	 <p>This auction is only available to the above countries.</p>	 </div>		 	</div>

I can't see why the float property doesn't flow the divs (inline) correctly in Firefox, like it does in IE6. Is there a way to get around this issue?Any help is greatly appreciated

[Ingolme 1,039]

Maybe instead of using the CSS float you can try displaying it as inline instead:#pp{ display: inline height: 250px; width: 375px; margin-left: 30px; padding-top: 20px; border: 1px black solid; } #pd{ display: inline height: 250px; width: 300px; margin-right: 30px; padding-top: 20px; border: 1px black solid; }** EDIT **Actually, that might not be a good solution after all... It would lose some of its block properties.

[zaniac 0]

Ingolme - Thanks for your suggestion. I tried the display:inline and it worked fine. However I plan to remove the border property and when I do so, it displays out of balance again. Thanks for the suggestion though

[zaniac 0]

In fact I think I have got both to display inline now. However, their positions within the containing <div> differ in IE6 and Firefox. Firefox seems to display both #pp & #pd inline, but at a lower level within the <div>.Basically I used....

#box{	height: 350px;	width: 924px;	background-image:url(pppd.gif);	clear: both;	margin-top: 9px;	float: right;			}#pp{ 	 height: 250px;	 width: 375px;	 margin: 20px 0px 0px 30px;	 float: right;	 	}#pd{	height: 250px;	width: 300px;	margin: 20px 30px 0px 0px;	float: right;	  }

From the above, you can see that I have floated both divs #pp & #pd to the right. I have also had to float the container <div>(#box) to the right for the background to at least display in Firefox. I added clear: both also, so that the container <div> background would not display further up my HTML page - which I did not include in my original post's coding.