How do I put this form and text on same line?

jeddi · 05-17-2008, 05:40 PM

Hi,

I am laying out my order page and want to place some text and the order button (which contains a form) on the same line.

But I can't seem to do it.

It keeps dropping down as if there is a page return !

Does anyone know how to do this ?

You can see the problem here:
http://www.promotiongold.com/

here is my code:

first the relevant css

Code:

.order-box {
  width: 360px;
	float:left;
  font-family: "MS Sans Serif", Arial, Helvetica, sans-serif; 
  font-size: 12px; 
  font-weight: normal; 
  color: black;
	border-width: 2px;
	border-color: blue;
}	

.lib-01 {
  font-size: 16px; 
  font-weight: bold; 
  color: red;
}	

.lib-02 {
  font-size: 14px; 
  font-weight: normal; 
  color: black;
	margin-left:20px;
}	

.lib-03 {
  font-size: 14px; 
  font-weight: bold; 
  color: black;
	margin-left:20px;
}

.lib-04 {
  font-size: 14px; 
  font-weight: bold; 
  color: black;
	margin-left:20px;
	height:30px;
}

And here is my HTML:

Code:

<div class="order-box" style='position:absolute;left:20px; top:10px;'>
   <span class="lib-01">Starter </span>
	 <br>
   <span class="lib-02">Full Spec, Blog enabled 80MB / 500MB  Hosting</span>
	 <br>
   <span class="lib-03">12 months hosting : cost $&nbsp; 6.95/month. </span>
	 <br>
	 <span class="lib-03">Benefits Pack value $ 97.</span>
	 <br>
	 <span class="lib-03">Total Value over $ 180</span>
	 <br>
	 <span class="lib-04">Pay Only  = $ 83.40 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
	 <span class="lib-04"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_GB/i/btn/x-click-but01.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN ******** END-----">
</form>
</span>
</div >

Thanks for any help.

_Aerospace_Eng_ · 05-17-2008, 09:05 PM

Forms are block level elements. Try this

Code:

<div class="order-box" style='position:absolute;left:20px; top:10px;'>
	<form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="float:right;">
		<input type="hidden" name="cmd" value="_s-xclick">
		<input type="image" src="https://www.paypal.com/en_GB/i/btn/x-click-but01.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
		<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
		<input type="hidden" name="encrypted" value="-----BEGIN ******** END-----">
	</form>
<span class="lib-01">Starter </span> <br>
	<span class="lib-02">Full Spec, Blog enabled 80MB / 500MB  Hosting</span> <br>
	<span class="lib-03">12 months hosting : cost $&nbsp; 6.95/month. </span> <br>
	<span class="lib-03">Benefits Pack value $ 97.</span> <br>
	<span class="lib-03">Total Value over $ 180</span> <br>
	<span class="lib-04">Pay Only  = $ 83.40 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
	</div>