Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts

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

    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.
    Last edited by jeddi; 05-17-2008 at 05:46 PM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •