/    Sign up×
Community /Pin to ProfileBookmark

Width: Pixels vs Percent

I’m trying to fully understand when it is a good idea to set a width in %, and when to set it in pixels.

For example, I have a 3 column layout I’ve done, and I set each column’s width as a % (all 3 equaling 73% in total to give some white space). But I also set a min-width of a certain pixel width so they only re-size so much So the Div’s don’t shrink smaller than such things as images within the Div’s. I also had issues before implementing this where if the window was re-sized, the div’s would shrink, and one might go underneath the other two instead of staying at it’s side. This was my original reason for setting a pixel value to min-width.

Would you say this method is a good idea? Also are there any good guidelines to know when it comes to knowing which value to use for width?

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@Major_PayneJan 29.2012 — Might help:

Choosing Dimensions for Your Web Page Layout:

In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/

Introduction to Responsive Web Design: http://www.linkedin.com/news?actionBar=&articleID=816934182&ids=0Sc3oQdP4TcjwIczwNd3cVdz4Ub38Pd3cPejoNe2MTcjgRcPkQcjwIdPgQcPcMdP4U&aag=true&freq=weekly&trk=eml-tod-b-ttle-99&ut=3Z-fJK7fpockY1

http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/

How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/

Care With Font Size: http://www.w3.org/QA/Tips/font-size

Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/t/y/l/ydlyuyd/birtthtw/h/

Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites-shouldnt-look-the-same-across-different-browsers%E2%80%A6here-is-why.html

Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/news/cross-browser-css-in-seconds-with-prefixr/

It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/its-not-responsive-web-building-its-responsive-web-design/

Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

Teach your clients about the mysteries of the web: http://weenudge.com/

960 Grid System: http://960.gs/
×

Success!

Help @JustWhatever spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...