CODEWITHSUNDEEP
css
air
air

Reputation: 6264

UL alignment to bottom

Profile Pictures 1 Picture Profile Pictures 2 Picture

css for is as bellow.

     #album{
height:195px;
width:155px;
overflow:hidden;
padding:6px 10px 14px 10px;
    float:left;

  }
#album li{
    border:0; 
    padding:0;
    list-style:none;
    margin: 0 0.15em;
    list-style:none;
    display: inline;
   }

   #album img{
  vertical-align:bottom;
   }
    #album a{
        color:#000000;
        text-decoration:none;

    }
    #album .user-title{
        display:block;
        font-weight:bold;
        margin-bottom:4px;
        font-size:11px;
        color:#36538D;
    }
    #album .addas{
        display:block;
        font-size:11px;
        color:#666666;
    }
    #album img{
        margin-right:14px;
        padding:4px;

    }

this is working fine.

but i need to align images to bottom on display.

here is image

Upvotes: 1

Views: 16728

Answers (2)

ivkremer
ivkremer

Reputation: 1275

Here is an easy solution to align all <li> contents to bottom in your case: http://jsfiddle.net/EmGqZ/

<style>
      ul#album {
        list-style-type: none;
    } #album li {
        float: left;
    }
    li div {
        vertical-align: bottom;
        height: 415px;
        display: table-cell;
    }​
</style>

<ul id="album">
    <li><div>
        <a href="#">
            <img src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/96/Drives-B-Metro-icon.png" /> 
        </a>
        <p><a href="#">Profile Pictures</a></p>
        <p>1 Picture</p>
    </div></li>

    <li><div style="padding-left: 15px">
        <a href="#">
            <img src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Drives-A-Metro-icon.png" /> 
        </a>
        <p><a href="#">Profile Pictures</a></p>
        <p>1 Picture</p>
    </div></li>
</ul>​

The main detail here is display: table-cell; declaration in css for all the divs located inside of li elements.

PS I think it is a bad idea to use the same id many times. But I suppose it was a misprint.

Upvotes: 5

BalusC
BalusC

Reputation: 1108642

I see the screenshot and now it's clear what you mean. Your initial example was far from valuable, it was incomplete. I copypasted it and I see all li's below each other, all perfectly aligned at bottom. You should have created a short, self contained, correct example which reproduces exactly the problem you have. Thus, from <html> to </html> including the doctype and the minimum required styles.

Now I'm guessing, but it look like that you have used float: left; on the li elements instead of display: inline; to display them next each other (inline) instead of below each other (block). The floats are by default aligned to top of the containing element and the display-inline is by default aligned to bottom of the containing element. Fix it accordingly and see if that helps in your case.

Upvotes: 0

Related Questions