Pixels to EM (or %)

I'm looking for a bit of help on how to convert px to em (or %'s). I've been using px for a while now and just want to know how to convert for expandable layouts

Any help is appreciated!
- Wildcard.

Edit: You wanted a different answer.

I recoded my portfolio for this:
http://files.xhtmlthis.com/xhtmlthis/

Here is the stylesheet:
http://files.xhtmlthis.com/xhtmlthis/style.css

A tricky thing about using em's, is if you have a <p> inside a <div>, the <p> inherits the <div>'s em size, not the body...it's like that with px, but with EM's it's different, you will see for yourself. Basically if you want 46px height, you use 4.6em. Look at the body tag and html tag, that will get you started. If you need any more help, just PM me.

@andrew: What Wildcard is asking about is elastic layouts, not fluid...at least based on the em's for width. A fluid site is like http://tuscany.cssmastery.com/, a elastic site is like www.SimpleBits.com, where you can change the font size and the layout will accompany it, they are two different things. Although you can combine them just as easy.

an em is a function of your current font size

% is a function of your current window size

due to these consideration the conversion factor from px to em or % is not set and can change

even working with "standard ems" different browsers ship with different default fonts, and macs and pcs have different default fonts

that being said, the conversion is often around 16px to 1em..... but this is user, browser, and computer dependent

here's a neat calculator, but again it's not really that useful
http://riddle.pl/emcalc/

conversion is very tricky if you have an pictures involved..... ideally you want to set the width of your pictures in ems so that they expand and contract w/ the text, but this is often not practical or ideal


garrett's page (that he showed in this thread) is a very nice example
http://files.xhtmlthis.com/xhtmlthis/
the page expands very nicely with the font size
however even this page gets all screwed up if you REDUCE the font size.... since the xhtmlthis logo doesn't shrink with the font, it ends up overlapping everything

to put it succinctly, making fluid layouts is hard, and you'll end up compromising.... but just think in terms of ratios

to put it succinctly, making fluid layouts is hard

Some designs are easy, other designs are literally impossible, especially on the shrinking side of things (not that many people turn the font size down, mind you)

Originally Posted by Garrett I recoded my portfolio for this: http://files.xhtmlthis.com/xhtmlthis/ @andrew: What Wildcard is asking about is elastic layouts, not fluid...at least based on the em's for width. A fluid site is like http://tuscany.cssmastery.com/, a elastic site is like www.SimpleBits.com, where you can change the font size and the layout will accompany it, they are two different things. Although you can combine them just as easy.

I know what the difference is. I just wasn't sure exactly what he was asking about.

Originally Posted by Superuser Account an em is a function of your current font size % is a function of your current window size due to these consideration the conversion factor from px to em or % is not set and can change even working with "standard ems" different browsers ship with different default fonts, and macs and pcs have different default fonts that being said, the conversion is often around 16px to 1em..... but this is user, browser, and computer dependent here's a neat calculator, but again it's not really that useful http://riddle.pl/emcalc/ conversion is very tricky if you have an pictures involved..... ideally you want to set the width of your pictures in ems so that they expand and contract w/ the text, but this is often not practical or ideal garrett's page (that he showed in this thread) is a very nice example http://files.xhtmlthis.com/xhtmlthis/ the page expands very nicely with the font size however even this page gets all screwed up if you REDUCE the font size.... since the xhtmlthis logo doesn't shrink with the font, it ends up overlapping everything to put it succinctly, making fluid layouts is hard, and you'll end up compromising.... but just think in terms of ratios

I could have just had the XHTML This logo as a <img> and I would have been fine, but I was just changing my CSS not HTML.