setting nested element width to column width

Question

I'm having some troubles to find the right way to approach this problem:

I've got a situation like the following:

<ul>
    <li class="section">
        <a href="#">
            <img src="path/to/img.png">
            <span class="title">Section 1</span>
        </a>
    </li>
    <li class="section">
        <a href="#">
            <img src="path/to/img-2.png">
            <span class="title">Section 2</span>
        </a>
    </li>
</ul>

Now within a 12 cols grid, I've got that .section is defined as:

.section {
    position: relative;
    @include span(6);
}

and so far so good. Now I've defined the .title to be hover the image like:

.title {
    display: block;
    position: absolute;
    bottom: 0;
}

[edit] the configuration I'm using has got the following definition:

susy: (
    gutter-position: inside;
);

but I can't use width: 100%; because it won't work, and I do need to manually give it a width, whereas a value computed out of span() won't work e.g. width: span(6 of 6); due to the gutter-position that sets the padding instead of the margin.

Is there any good or consistent way to go around this problem?

Should I just stick to the default after or before for gutter-position?

Answer 1

You need to set the left property in order to align your title with the container, and then you can either set right or width to get the full width:

.title {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

or

.title {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}