nested columns in compass/sass

Posted by corroded on Stack Overflow See other posts from Stack Overflow or by corroded
Published on 2010-05-20T16:15:12Z Indexed on 2010/05/20 19:40 UTC
Read the original article Hit count: 252

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about css

Related posts about compass