Comment by huckfinnaafb | Hacker News Reader

Comment by huckfinnaafb | Hacker News Reader

Parent Full thread

On the blog...

"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>

Bear in mind that calc() has terrible support [http://caniuse.com/#search=calc]. Box-sizing fixes the problems addressed by this "framework" without deferring to an expensive and inappropriately used calc() property.

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/...].

Extra <div>s just to control margins looks very much like having to add markup just to do layout, i.e. mixing markup with layout. Your nested div has no semantic meaning, they are only present for layout.

<div>s are semantically neutral so while it is extra markup, it's not like they had any semantic meaning in the first place. The relevancy of semantics is a can of worms in of itself...

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()...

Hi I'm an author of this framework. I must point that this is just experimental framework it works only in Firefox4 and later.

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..

Are you aware that you can achieve visually identical effect with `box-sizing`? (it can change "W3C" box model to "quirks" box model on any container)

    width: 25%;
    padding: 10px;
    border: 5px;
    box-sizing:border-box;

gives same effect as:

    width: calc(25%-10px-5px);
    padding: 10px;
    border: 5px;

Also, it would be nice if your framework had at least half-decent fallback for browsers without calc() (I think `width:24%` would be better than leaving it auto).

For anyone interested, I actually had written up an article on box-sizing yesterday: http://monkeyandcrow.com/blog/splitting_the_difference/

There's an example illustrating pornel's point.

I actually wanted to use margins, yes is true if you use padding the box model can help, here is good explanation about the http://www.quirksmode.org/css/box.html box model.

It's a CSS3 demo. It says CSS3 in the title. I don't think lack of support is much of a criticism.

If you swap margin for padding, then:

    box-sizing: border-box;

magically solves this problem and already works in all browsers (including IE since v8).

Reply on news.ycombinator.com