Results 1 to 4 of 4

Thread: How To Change Pixel into percentage

  1. #1
    Join Date
    Jun 2008
    Thanked 0 Times in 0 Posts

    Question How To Change Pixel into percentage


    I m trying to code the layout in liquid layout....I have created the all divs you can say that frame set of the layout but now I am putting the content into the divs(width in percentage per liquid layout)....but now I have to convert the pixels width and height into percentage to make it liquid layout here I m stuck...if some one could help me in this...that wil be very great.

    Note:- If anyone give a link or tutorial or code of totally liquid layout based website than that will be also very helpful

    Thanks in advance!!


  2. #2
    Join Date
    Jul 2006
    Antwerp, Belgium (Europe)
    Thanked 2 Times in 2 Posts

  3. #3
    Join Date
    Jul 2006
    just north of Boston, MA
    Thanked 72 Times in 72 Posts


    This is going to involve some basic math, so I am going to assume you know how to use a calculator.

    The audience of the website is one of the most critical aspects of any website/speech/ or basically any form of interaction with another human. For web development purposes, thinking about width and fluidity you need to consider both the high end and the low end. You want to design for the middle and offer features for the high and the low ends. Meaning you want your website to look good on a monitor that has resolution of 2060x1600px but also on a monitor with a lot less. I am going to design this for a 800px width browser, however depending on your audience that may not be small enough (pda/handheld)etc...

    So my body is 800px wide, but I am going to do a centered page and I would like some whitespace on either side if available.

    In order to accomplish this I have to come up with a number that will both work effectively (not give me any horizontal scroll) but will also be available to expand. So I come up with the number of 770px wide that I want my outside container. This will allow me approximately 15pixels "padding" on the left and right to deal with those browser inconsistencies. so to find out what I need my percentage at, I do some math

    Goal: 770
    Actual: % 800
    Total: .9625

    multiply to get the percentage and we get 96.25% you can decide whether you would like to round or not but I am not going to.

    The next element is my header script, and I want that to cover the whole width so I set that at 100%

    the next block of code is dependent upon what type layout I have, I am going to share a 2 column layout because I just dont want to get into explaining a 3 column fluid layout at the moment.

    In my table structure I have my left column (nav) set to 190pixels. To convert that to percentage I do the same steps I did before... except now my "content" isnt the full body of 800 its the 770.

    Goal: 190
    Content: %770
    Total: .24675325

    multiply by 100 to get the percentage and I get 24.675325% that now becomes my left navigation.

    I then take my right side cell which is 580 and divide that by 770 then multiply by 100 to get 75.324675% which now becomes my right side... some people may just round to 25% and 75% but that is up to you.

    now as for the height, my suggestion would be to not touch the height attribute at all, and let it be handled by the default mechanism of the browser... which is the height is 100% of the content within.

  4. #4
    Join Date
    Mar 2007
    Currently: New York/Philadelphia
    Thanked 519 Times in 507 Posts


    Or...use this.


Posting Permissions

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