nested columns in compass/sass

Question

I've been studying compass and while it is a fun thing to play with and use, one thing bothers me(besides being unable to add padding as it wrecks the grid), how do I nest columns?

I want to be able to do what blueprint does: nest containers like say, I have a 24-column page divided in two(17 and 7 columns). In the right part of that page(the one with 7 columns), I want to divided some elements into two(2 and 5 columns).

I tried this:

#main
  +container

  #main-content
    +column(17)
    +box-padding(17, 10px)
    :margin
    :right 0

  #sidebar
    +column(7, true)
    +box-padding(7, 10px)

That's the code for the main page. The sidebar contains a list with some labels and input fields

li
  +container
  :margin
    :bottom 5px

label
  +column(2)
  :margin
    :right 0

input
  +column(5, true)

It kinda works, but inspecting the li in firebug shows that it's width is actually 950px as opposed to be just 270px since it is just 7 columns. I tried googling about nested columns but I can't seem to find any example in compass. I've also tried the wiki and the documentation to no avail.

Answer 1

I think part of the problem (maybe the whole problem?) is that you've applied the container mixin to the li. That mixin defines the width as the value of !blueprint_container_size which, by default, has a value of 950px (but can be overridden). Remove that and you should be okay. The container is meant to delineate the whole, not parts within the whole.