CODEWITHSUNDEEP
htmlcss
Nistor Alexandru
Nistor Alexandru

Reputation: 5393

How to set an element at the bottom of container

Hi I have a container that has a number of unordered lists.I want the last unordered list to be set at 0 margin at the bottom.Here is my code and what I tryed and doesn't work:

<ul id="updates">
              <li>Follow Zack's updates<br/>300 followers. Follows:</li>
              <li><a href="#"><img src="img/zack/update1.png" alt="update"/></a></li>
              <li><a href="#"><img src="img/zack/update2.png" alt="update"/></a></li>
              <li><a href="#"><img src="img/zack/update3.png" alt="update"/></a></li>
              <li><a href="#"><img src="img/zack/update4.png" alt="update"/></a></li>
              <li>+ <br/> 10</li>
          </ul>


<p> Site powered by zi<span>kio<span></p>
div#articles p{
   margin-top: auto;
   margin-bottom: 0
}
ul#updates{
   margin-top: auto;
   margin-bottom: 0;
}

Both p and ul#updates need to be set at the bottom with margins 0.

*EDIT:*The parent is already set to position:fixed so positioning it relative is not an option

Upvotes: 2

Views: 1602

Answers (3)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

Assuming your list are all children of div.article just set

div.article {
   position: relative; /* after your edit: fixed is fine too */
   padding-bottom : /* enough to make room for last ul */
}

div.article > ul:last-child {
   position : absolute;
   bottom   : 0;
}

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

When using lists like this, you're best to reset the lists to zero margin and padding, then style the CONTENTS of the list, not the list itself.

#updates, #updates li {
   margin:0;
   padding:0;
}

Then for your list items:

#updates a {
   display:block;
   padding: ___ <-- insert your values
   margin: ___
}

Also, it's better form to use CSS backgrounds for UI elements than inline images. You can set the size of your links in the list to correspond with the image size and apply the image as a CSS background.

  #updates a {
       display:block;
       background-image:url(img/zack/update1.png);
       height: ___
       width: ___
       padding: ___ 
       margin: ___
    }

Upvotes: 1

user818991
user818991

Reputation:

add position:relative to the "containing" <div> then add position:absolute; bottom:0; to your <ul> and <p> css

Upvotes: 2

Related Questions