Using em or percentage for CSS grid layout
I am working on 3-4 pages of a website. It will use jQuery, jQuery UI and Ajax for most of the pages. I hope there is no need to encode anything in pixels.
So far, I've spent a few days looking for solutions and my head is spinning as I can't see what I want. I am trying to figure out how best to host a website so that it is responsive and therefore adapts well to browser resizing. It seems to me that pages created using percent or em resize much better than those using fixed px for layout.
Not sure, but I think that using a "grid" like gold grid or some others would be overkill. Am I thinking of doing something like this?
#container {
max-width: 75em;
margin: 0 auto;
}
#primary {
float:left;
width: 25%;
}
#content {
float:left;
width:50%;
}
#secondary {
float:left;
width:25%;
}
Should I use percentage for the width or should I somehow do it with ems. Hope I get good suggestions.
thank
source to share
First: in your case, use percentages. Percentages are based on their parent elements, while em is based on font size. If you want to resize your site based on browsers use%, if you want your site to resize when the user changes font size use em.
Some additional ideas:
In my experience the choice of%, px, em depends on the project (and thus the purpose of the site).
If the site is a kind of portfolio, I might suggest using pixel-based layouts. (As most people see them as a digital version of their work and want it to look exactly like the (prelayouted) project). This way you get a good result, but you may run into problems when the site is resized (for example, the text becomes large).
In this case, relative systems are (obviously) better since they scale well. This is often more user-friendly as you have the assurance that the container scale fits. Use this if you want to make your site more accessible.
Keep in mind that you can use pixel / relative layouts and still solve other problems. Often the general layout is%, but some containers are pixel based.
And since you are using JS to improve your site, you can use it, resize the site on the fly, or do other things (although I would not recommend this if not necessary, due to the fact that not everyone uses JS (but this already another story))
source to share
You can use this: http://grids.heroku.com/ and choose the fluid width option when viewing / loading it.
source to share