Foxy - CSS3 Framework: Using CSS3 Calc()
github.com
github.com
"If you have some .class { width:25% } that will make 4 columns grid (25% + 25% +25% + 25%). The problem is that you can't have precision px margins (gutter). So in the past you had nested divs or .something-like-this{width:24%; margin-left:1%}..."
"With calc() that problem is solved now we can have .class{width:calc(25%-10px); margin-left:10px} . And with that we can have the flexibility of the % and the px precision."
This was never a problem if you separated your layout markup from your content markup, like so.
<div style="float:left;width:50%">
<div style="margin:12px">Hello, world</div>
</div>
<div style="float:left;width:50%">
<div style="margin:12px">Hello, world</div>
</div>
I see no reason why anyone would use this over a grid model such as this [https://github.com/stubbornella/oocss/blob/master/core/grid/...].
If you're not interested in separating layout markup from content markup, the box-sizing property might be for you.
But I'd certainly avoid using calc()...
Back in 2008 I build Malo - CSS Framework http://code.google.com/p/malo/ that already is using the solution that you pointed (div inside div). Malo works even in IE 5.5.
The problem of this solution is that you have extra divs or paragraphs or you mast build complete typographical solution like I did with Emastic http://code.google.com/p/emastic/.
Other solution is to have % margins(gutter) Example: width:24% and margin-left:1% total 25%. This is good solution if you have fixed container like 960px or 1000px.
So if we have 1000px container is very easy yo calculate that 1% will be 10px.
But what happens if we want to have 80% container? Meaning 80% of any browser size. There is no way that we can calculate that. That is calc() is cool.
We can do calc(25% -10px) margin-left:10px Here is working demo: http://dl.dropbox.com/u/2111778/Foxy-CSS-Framework/calc1.htm... .
The concept is: Fluid % main container (it can be also fixed), fluid % columns, fixed px margin(gutter).
I repeat this is just experimental framework with the goal to show potential use of the CSS3 calc() function. I think that the calc() function has huge potential for cool layouts in the future..
width: 25%;
padding: 10px;
border: 5px;
box-sizing:border-box;
width: calc(25%-10px-5px);
padding: 10px;
border: 5px;
There's an example illustrating pornel's point.
box-sizing: border-box;