setting nested element width to column width - susy-compass

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%;
}