EzDevInfo.com

Messing with Constraint CSS - width based on number of children

I'm using gridstylesheets.org to mess with Constraint CSS. My html is this:

<div class="box side-by-side">
  <div class="space"></div>
  <div class="space"></div>
  <div class="space"></div>
</div>

I would like each .space to be the height of the .box and to have evenly sized widths. In this case, the .box width divided by 3.

So far I have this:

.side-by-side .space {
  left: >= ::parent[left];
  top: >= ::parent[top];
  width: == 200;
  height: == 100;
}
.side-by-side {
  @h .space in([.side-by-side]);
}

It floats the .spaces inside the parent but I'm not sure how to set the width. I would like to do something like this:

width: == ::parent[width] / ::parent[num-children];

Find the First child of all containers

I have a bunch of containers in a html page for example

<div class="container">
    <div class="details">
        <span id="Title">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

<div class="container">
    <div class="details">
        <span id="Title">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

I would like to target the first details class in each container and add a class to the Title Class with jQuery.

The JQuery Code I have, works perfectly, but only does this for the first container, and not the second or the third container class.

$('.container').closest('.Details:first').find('#Title').addClass('header');

So my ideal result should be :

<div class="container">
    <div class="details">
        <span id="Title" class="header">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

<div class="container">
    <div class="details">
        <span id="Title" class="header">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

Any help will be appreciated