CODEWITHSUNDEEP
csszurb-foundation
MeltingDog
MeltingDog

Reputation: 15488

Foundation: Way to offset inner columns as much as outer columns?

I have a few rows set up as such:

<div class="header row">
  <div class="small-4 small-offset-1 columns">
  left
  </div>
  <div class="small-7 columns">
  right
  </div>
</div>

<div class="content row">
  <div class="small-5 columns">
    left
    <ul>
    <li class="row">
      <div class="small-9 columns">list info</div>
      <div class="small-3 columns">list info</div>
    </li>
    <li class="row">
      <div class="small-9 columns">list info</div>
      <div class="small-3 columns">list info</div>
    </li>
    </ul>
  </div>
  <div class="small-7 columns">
    right
  </div>
</div>

I want the li rows to stretch the full width of their parent .small-5 column.

But, I want the content of the lis - the .small-9 and .small-3 to be offset by 1/12 the width of the entire screen, exactly like header row above (small-4 small-offset-1).

This fiddle might help explain what I'm trying to do: https://jsfiddle.net/4tp87v60/15/

Would anyone know if this is achievable with Foundation?

Upvotes: 0

Views: 181

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42374

The small-4 class simply has a margin-left originating from .small-offset-1 of 8.33333% (100% / 12).

If I understand you correctly, you simply want to offset the <ul> in small-5. Unfortunately, the closest you can do by adding Foundation classes is small-offset-3, which gives margin-left: 25%.

However, there's nothing stopping you adding the correct offset of 27.33333% manually:

.small-5 ul {
  margin-left: 27.33333%;
}

I've created a new fiddle showcasing this here.

EDIT

In order to simply offset the content of the <li> element, you simply need to slightly adjust this to:

.small-5 ul .small-9 {
  padding-left: 25%; // Equivalent to three columns at 8.33333%
}

A secondary fiddle of this is available here.

Hope this helps! :)

Upvotes: 1

Related Questions