Question

I’m really not sure what information is relevant to include here, so I’ll be generous. On the top of my page, I have a horizontal line. Now, on top of this line, in the bottom right, I want to place my meny which consists of three gif images. The images align to the right nicely but won’t go all the way down to the bottom. Earlier, I had the same design but using only CSS to create three boxes and it worked like a charm. The images are exactly 96px wide and 45px high. This is my HTML followed by the CSS (I’m using the 960 grid system):

And oh yeah, I have already tried to use negative margins for the li with CSS.

<div class="grid_8">
            <ul>
                <a href="cv.html"><li></li></a>
                <a href="arbete.html"><li></li></a>
                <a href="index.html"><li></li></a>
            </ul>
</div>

ul {
list-style:none;
padding:0;
margin-top:50px;
}

li:first-child {
margin-right:-5px;
}

li {
background-image:url('bilder/meny_hem.gif');
float:right;
width:96px;
height:45px;
margin-bottom:0px;
padding-bottom:0px;
}

EDIT: This is my new code. Correct (?) syntax but the problem remains. See also the image of what it looks like.

<ul>
    <li><a href="cv.html"></a></li>
    <li><a href="arbete.html"></a></li>
    <li><a href="index.html"></a></li>
</ul>

ul {
list-style:none;
padding:0;
margin-top:50px;
}

li:first-child {
margin-right:-5px;
}

li {
float:right;
width:96px;
height:45px;
}

a {
display:block;  
background-image:url('bilder/meny_hem.gif');
width:96px;
height:45px;
margin-bottom:0px;
padding-bottom:0px;
}

Answer 1

If you want that to stick to the bottom of your container div (grid_8) you’ll have to adjust its height to be aproximatelly the height of your buttons like so:

<div class="grid_8 container">
    <ul>
        <li><a href="cv.html">HEM</a></li>
        <li><a href="arbete.html">HEM</a></li>
        <li><a href="index.html">HEM</a></li>
    </ul>
</div>

.container{
    width:100%;
    height:50px;
    border-bottom:1px solid black;        
}

http://jsfiddle.net/pqV5E/29/

You can also make your <ul> absolute and relative to your container and by using bottom:0; you’ll have it stick to the bottom like so:

ul {
    list-style:none;
    padding:0;
    position:absolute;
    bottom:5px; 
    right:0;
}

.container{
    width:100%;
    height:100px;
    position:relative;      
} 

If you’ll use this last technique please be sure to remove your <ul> margin-top, and just add that margin value to your container’s height

http://jsfiddle.net/pqV5E/28/

I’ve used rounded corner buttons instead of images but you can switch to any image you’d like.