...

View Full Version : How do I put this form and text on same line?



jeddi
05-17-2008, 06: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


.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:



<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, 10:05 PM
Forms are block level elements. Try this

<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum