Positioning text near an HTML form

[WarKirby]

Hi folks.

We're having a seemingly minor problem with a bit of text positioning:

http://roshni.org.uk/Backup/Get%20Involved/Donation

 

See the central box.

The £ sign is floating above the box, when we want it to be on the left. For some reason the input box is determined to be on a line alone.

 

The relevant code is:

<div id="donationform2">
            <form method="post" action="https://www.paypal.com/cgi-bin/webscr">
                <p align="center"><input type="hidden" name="cmd" value="_xclick-subscriptions" /> <input type="hidden" name="business" value="ali@roshni.org.uk" />£<input name="a3" size="15"/><input type="hidden" name="p3" value="12" /> <input type="hidden" name="t3" value="M" /> <input type="hidden" name="currency_code" value="GBP" /> <input type="hidden" name="ls" value="AU" /> <input type="hidden" name="return" value="http://net.tutsplus.com/payment-complete/" /> <br /><br /><input border="0" alt="PayPal - The safer, easier way to pay
                online." src="https://www.paypal.com/en_US/GB/i/btn/btn_donateCC_LG.gif" type="image" name="submit" /> </p>
            </form>
            </div>

 

And our CSS for this div:

div#donationform2
{
position:relative;
top:0px;
left:50px;
width: 35px;
}

 

I've poked at it for a bit, but I can't seem to figure out the issue. I've tried adjusting the size of the text box, but the £ sign doesn't move down into the space that creates.

[nano]

It's because of your 35px width. Increase that to something more realistic and you should be ok..

 

Had a quick look and you would need a width of 160px width overflow set to hidden.

 

Good luck.

 

[WarKirby]

excellent, thank you

I went with 140px, it does the job perfect. I don't quite understand why 160 would be needed

[nano]

160px because of the payment icons you have below, that covers everything within the main wrap.

 

Overflow:hidden; will then also make sure you have covered your bases