CODEWITHSUNDEEP
susy-compasssusysusy-sass
Mr Peach
Mr Peach

Reputation: 1364

setting nested element width to column width

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?

Upvotes: 1

Views: 43

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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

Upvotes: 1

Related Questions