blueprint issue

Question

I have the following layout. the first row prints just fine, but the beginning of the 2nd row starts where the 2nd div on the 2nd row should be. If I set the span of the last div in the 1st row to 3, the 2nd prints fine.

the parent div is 670 pixels and each child is 160 (including 10px right margin) All 4 should fit in a row, but they are not, whats wrong here?

I bassically want a parent div of 17 spans with rows of 4 child divs each with span of 4.

<div id="parent" class="span-17 last>
   <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
  <span>content</content>
  <span> image </content>
</div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4 last">
   <span>content</content>
   <span> image </content>
   </div>
<!--row 2 starts -->
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4">
   <span>content</content>
   <span> image </content>
   </div>
  <div id="child" class="span-4 last">
   <span>content</content>
   <span> image </content>
   </div>
</div>

Answer 1

Unless you've used a compressor to change the default number of columns, Blueprint uses 24 columns by default. Plus, you should be defining a container somewhere:

<div class="container">
    <div class="span-24 last">
        Header Row
    </div>
    <div class="span-4">
        Blank buffer div (to keep 24 cols)
    </div>
    <div class="span-4">
        Content 1
    </div>
    <div class="span-4">
        Content 2
    </div>
    <div class="span-4">
        Content 3
    </div>
    <div class="span-4">
        Content 4
    </div>
    <div class="span-4 last">
        Another blank buffer
    </div>
</div>

Basically, you should also ensure all columns add to 24 at all times. the last declaration does not fill in any missing columns. You mention a span-17 div with 4 span-4 children, which doesn't add up. You're missing a column in there, which can produce undefined results or at the least just look bad.

If you don't want the buffer <div>s, just use span-6 for each, which divides 4 blocks evenly into 24.