Need help on layout positioning

holy24 · 02-15-2013, 01:18 AM

Hi,

I having been trying to do an invoice, and using float/absolute positioning etc but I still unable to get my layout shown out properly. Can someone please kindly help? Thanks.

Below is the layout:

Code:

To the left                                                        To the right
Customer: Name of the company (Textbox) - first line               Invoice No.: (Textbox) - first line 
          Name of address (Textarea) - Second line                  Handled by: (Textbox) - second line
                                                                          Date: (Textbox) - third line 

Example:

Customer: ABC Pte Ltd                                              Invoice No. : 670987 
          Industrial Park 2,                                         Handled by: Peter Tan
          #04-1088                                                         Date: 24/02/2013
          Postal Code 123456

niralsoni · 02-15-2013, 10:24 AM

Code:

<div>
	<div style="float: left">
		<table border="0" cellspacing="0" cellpadding="5">
		<tr>
			<td align="right">Customer :</td>
			<td align="left"><INPUT type="text" name=""></td>
		</tr>
		<tr>
			<td align="right">Address :</td>
			<td align="left"><TEXTAREA name="" rows="3" cols="16"></TEXTAREA></td>
		</tr>
		</table>
	</div>
	<div style="float: right">
		<table border="0" cellspacing="0" cellpadding="5">
		<tr>
			<td align="right">Invoice No. :</td>
			<td align="left"><INPUT type="text" name=""></td>
		</tr>
		<tr>
			<td align="right">Handled by :</td>
			<td align="left"><INPUT type="text" name=""></td>
		</tr>
		<tr>
			<td align="right">Date :</td>
			<td align="left"><INPUT type="text" name=""></td>
		</tr>
		</table>
	</div>
</div>

Frankie · 02-15-2013, 12:41 PM

@ Niralsoni: refusing to use anything later than HTML4 Transitional? Ever heard of separating make-up and content?

niralsoni · 02-15-2013, 01:47 PM

Hey Frank,

I know my knowledge about HTML, CSS is limited and outdated. But I still try to provide solutions with limited access to the tools and libraries at my work-place.

Could you please guide me to the correct path to enrich my understanding ?

Many thanks.

Regards,
Niral soni

Frankie · 02-15-2013, 02:00 PM

Quote:

Originally Posted by niralsoni

But I still try to provide solutions with limited access to the tools and libraries at my work-place.
Could you please guide me to the correct path to enrich my understanding ?

Hey Niral,

It has little to do with tools and libraries. It does have everything to do with knowledge of CSS, which you can gain at W3 Schools for free.

Excavator · 02-15-2013, 05:52 PM

Hello holy24,
Have a look at this demo - http://www.jonathantneal.com/examples/invoice/

With some different CSS styling, you could re-arrange that however you like. Full article here.

Some more ideas here.

--niralsoni, I'm not so sure an argument can't be made for tables in this case. I dislike tables though and never learned them, see the link about tables in my signature.