Menu icon Foundation
Keeping an element fixed inside a div?

Hi Everyone

I have a page setup with the simple markup below.

As you can see I have a ul list inside the large-3 div which I would like to give a fixed position and the container div have 100% height. When I give the ul a position of fixed, it removes the list from the div element, so it then becomes relative to the viewport and not the container div.

So is there a way to give the ul a fixed position and keep it relative to the div?

Thanks for any help with this.

<div class="row">

    <div class="large-3 columns">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div class="large-9 columns"></div>

    
</div>
            

         

fixed ul

Hi Everyone

I have a page setup with the simple markup below.

As you can see I have a ul list inside the large-3 div which I would like to give a fixed position and the container div have 100% height. When I give the ul a position of fixed, it removes the list from the div element, so it then becomes relative to the viewport and not the container div.

So is there a way to give the ul a fixed position and keep it relative to the div?

Thanks for any help with this.

<div class="row">

    <div class="large-3 columns">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div class="large-9 columns"></div>

    
</div>
            

         
Scott James over 5 years ago

Ok. So I have the ul fixed, and the div container have a height of 100%, but the ul background will not span the width of the container div.

So does anyone else have any ideas?

Malou Geurts over 5 years ago

You could try using position: absolute (you'll have to give the parent element a position of relative). If this is what you mean?

.extra-special-class-1 {
   position: relative;
}

.extra-special-class-2 {
   position: absolute;
}
<div class="row">

    <div class="large-3 columns extra-special-class-1">
        <ul class="extra-special-class-2">
            <li></li>
            <li></li>
        </ul>
    </div>

    <div class="large-9 columns"></div>


</div>

About the background width, have you set it to {width: 100%;} ?