Grow your CSS skills. Land your dream job.

How to work out Conversions from PX to Percentages

  • # April 20, 2013 at 6:27 am

    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.

    # April 20, 2013 at 8:22 am

    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.

    # April 20, 2013 at 9:19 am

    @Paulie_D

    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. http://codepen.io/mwbcomputers/pen/JHKoy

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

    # April 20, 2013 at 9:22 am

    Just float the uls to the left.

    # April 20, 2013 at 9:27 am

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

    # April 20, 2013 at 9:32 am

    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.

    # April 20, 2013 at 11:01 am

    Here a go I have sorta work at footer just a couple of issue trying to figure out http://codepen.io/mwbcomputers/pen/JHKoy

    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

    # April 20, 2013 at 2:49 pm

    Hi @mwbcomputers,

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

    # April 20, 2013 at 10:12 pm

    @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.

    # April 21, 2013 at 12:56 am

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

    @Paulie_D, 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. http://pxtoem.com/

    # April 21, 2013 at 5:15 am

    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.

    # April 21, 2013 at 9:43 pm

    @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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".