I read Ethan Marcotte’s book on Responsive Web Design but something that still isn’t clear to me is when to use px vs. % for margins and padding on elements. If any of you have the book, on page 37 there is an example where he uses:
padding: 40px 8.48056537%
When is it appropriate to use PX vs. %? I am confused about using the combination of the two on one element.
that is px for top and bottem and % for left and right. Meaning the width is adjustable and the height will be a fixed height. Common for responsive web design, but you can also have the height adjust as well by using %…good for keeping content above the fold for different size browsers.
From what I understand, I set the width via percentage, I don’t touch the height at all, so let’s say I have a 500px width div inside of a 900px container, if I understand correctly the percentage would be:
I think you may be over thinking it just a little bit…simple is better, don’t make your life any harder than it has to be…why not just use some media queries to save your self all of that trouble? or do you HAVE to have a completely fluid responsive design?
I suppose it doesn’t have to be completely fluid, I was just trying that route out, but in the interest of time on this project you may be right in just using media queries to deliver different styles at the break points.
I’m also a little bit confused about height. I’ve been doing some of the mixed height-with-px-width-with-percentage business… but I have a situation where I want something absolutely fixed a certain percentage below an image that is resizing. I will probably just use media queries… but was hoping there was a more dynamic way to do this.