Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm using Semantic.gs as my grid system. I'm following the nested column example to try and create what I want while following the grids as much as possible. Given nested column example code from Semantic.gs:

HTML

<article>
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
   </ul>
</article>

LESS

article {
   .column(9);

   ul {
      .row(9);

      li {
         .column(6,9);
      }
   }
}

My question is, what's the best way to go about adding padding (ideally the same width as the gutters) to a parent of nested columns, while adhering to the grid system (semantic.gs) as much as possible? Note, I am using a fixed layout of 960px.

Here's an example (Photoshop, not exactly according to code above) image of what I'm trying to achieve with the right and left padding on the beige color parent element:

enter image description here

UPDATE: Following sandeeps example I was able to do this, but I did fail to mention I am using a 960px grid. Here are my results: http://bit.ly/M5fr5N

Cheers,
Ryan

share|improve this question
add comment

1 Answer

up vote 0 down vote

You can use CSS box-sizing property for this. Write like this:

#maincolumn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background: none repeat scroll 0 0 red;
    display: inline;
    float: left;
    margin: 0 1.04167%;
    width: 72.9167%;
}
share|improve this answer
 
Thanks sandeep! This does work for the example I gave; however, I failed to mention that I'm using a fixed layout of 960px and this is my result: bit.ly/M5fr5N –  Ryan May 30 '12 at 5:15
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.