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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help on layout positioning

    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

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    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>

  • Users who have thanked niralsoni for this post:

    holy24 (02-19-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    343
    Thanks
    3
    Thanked 37 Times in 37 Posts
    @ Niralsoni: refusing to use anything later than HTML4 Transitional? Ever heard of separating make-up and content?
    Last edited by Frankie; 02-15-2013 at 01:45 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    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

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    343
    Thanks
    3
    Thanked 37 Times in 37 Posts
    Quote Originally Posted by niralsoni View Post
    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.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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