Nested Span problems:

[Bob Archer]

I seem to be having problem getting nested spans to work. I assume I am doing something wrong. 

My fundamental understanding is that if I have a div that uses span-12, then withing that div there are 12 columns that I could also put spans in, and not 24 columns. 

Anyway... I am trying to set up sort of a semantic styles to layout data entry forms in our web application. I have two classes to create a two column layout on a form. (BTW: I'm using compass too).

// Two column semantic styles

.col-left {

@include column(12);

background: red;

}

.col-right {

@include column(12, true);

background: blue;

}

For those that don't use compass passing true to the column mixin adds the last class.

The above works fine and gives me two columns. No, I am trying to set up two columns that will fit withing 12 columns. One for the labels and one for the inputs.

.display-label, 

.editor-label {

@include column(4);

background: green;

}

.display-field, 

.editor-field {

@include column(8, true);

background: yellow;

}

The background colors are just for me own debugging. 

And example of the layout would be something like:

<div class="col-left">

   <div class="editor-label">

      <label></label>

   </div>

   <div class="editor-field">

      <input blah blah />

   <div>

   <div class="editor-label">

      <label></label>

   </div>

   <div class="editor-field">

      <input blah blah />

   <div>

   <div class="editor-label">

      <label></label>

   </div>

   <div class="editor-field">

      <input blah blah />

   <div>

   <div class="editor-label">

      <label></label>

   </div>

   <div class="editor-field">

      <input blah blah />

   <div>

</div>

<div class="col-right">

   <div class="editor-label">

      <label></label>

   </div>

   <div class="editor-field">

      <input blah blah />

   <div>

   <div class="editor-label">

      <label></label>

   </div>

   <div class="editor-field">

      <input blah blah />

   <div>

   <div class="editor-label">

      <label></label>

   </div>

   <div class="editor-field">

      <input blah blah />

   <div>

   <div class="editor-label">

      <label></label>

   </div>

   <div class="editor-field">

      <input blah blah />

   <div>

</div>

It just doesn't layout property. Stuff in the write column goes of the right screen. All of the above is in a wrapper div which is styled as container. Also, the above are contained in divs which use the jQuery UI tabs. I found in the issue log that you have to style those divs with container class as well, so I have done that too. This makes sure the tab divs surround the spans.

BOb

[Sean K. Stewart]

Hi Bob,

I just noticed this post and figured I add to the form-test.html file
we've been working with.
http://seankstewart.com/blueprint/tests/parts/forms-test.html

Scroll to the bottom to see my example based on your html above.

I do not use compass, and I'm not sure if the html above is output by
compass. However, you are missing a / in your closing div tags, which
is throwing your styles off.

Hope this helps

Sean K. Stewart
www.seankstewart.com