The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to work out Conversions from PX to Percentages

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #44258

    How to work out Conversions from PX to Percentages? My maths is not very good never go that far in school.

    Also is there a nice three or four column footer that I can look at that has social media links etc in code pen I can typed it in search area can’t find any.

    Trying to design one with contact icons etc for my movie and games store.


    To be honest, px to % is not really something that happens in the real world.

    Pretty much every screen will be an individual size and even browsers can’t agree what the page width actually is. Chrome does something funky when a scrollbar is involved but FF & IE don’t.

    The ‘latest’ kid on the block is the vh & vw sizes which represent an actual relationship to the viewport but support is pretty light at the moment.

    If you want some help on a footer, try designing one in Codepen and we would be happy to help you out with anytg you have trouble with.

    Copying / Emulating someone else’s work is not the way to start.



    In regards to the footer I am trying to split some LI to have two rows in one column I though it might of been float right but think I have missed a step or two.

    Can you point me in the right direction if there is any tutorials and such on it.


    Just float the uls to the left.


    will give it a go I know you said don’t use tables.


    I’m not saying **never** use tables…just there is no need to use them for layout anymore.

    If you have data that needs a table then by all means use one.


    Here a go I have sorta work at footer just a couple of issue trying to figure out

    Issue One How would i get in the contact area the Saturday and Sunday and the closed to float right of Monday and Friday.

    Also I put a border up just o give a idea when I remove it it look like has quite a big space left do you think I should float the second and third column text to the right


    Hi @mwbcomputers,

    [Here is a quick sample…]( “”) of how I would have gone about it. The CSS has over 130 lines of less code than what you had.


    @jurotek thanks for that will have quick look at it I only just did rough layout before to get a idea. I generally do demo mock ups first.


    > To be honest, px to % is not really something that happens in the real world.

    , care to expand on this? In my experience it’s used in font sizing quite a bit. Unless I misunderstood what you meant.

    Here’s a handy converter.


    The concept that a pixel actually represents a % of the viewport is wrong

    A 16px font is always going to be 16px tall no matter how tall or wide the viewport is. In that sense, any relationship between px and % is broken.

    That’s why the vh & vw properties have been introduced. They actually ARE % of the viewport height and width respectively.


    @Paulie_D – got it!

    There was a problem I was working on in the past where another member graciously helped me out and the solution was using vh and vm units…unfortunately since I have to support IE8 it was an unrealistic solution. :(

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.