Jump to content

Floating and keeping divs inline


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...