zaniac 0 Posted November 11, 2007 Report Share Posted November 11, 2007 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 Quote Link to post Share on other sites
Ingolme 1,035 Posted November 11, 2007 Report Share Posted November 11, 2007 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. Quote Link to post Share on other sites
zaniac 0 Posted November 11, 2007 Author Report Share Posted November 11, 2007 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 Quote Link to post Share on other sites
zaniac 0 Posted November 11, 2007 Author Report Share Posted November 11, 2007 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.