zaniac Posted November 11, 2007 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 Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2007 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. Link to comment Share on other sites More sharing options...
zaniac Posted November 11, 2007 Author 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 Link to comment Share on other sites More sharing options...
zaniac Posted November 11, 2007 Author 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.