CODEWITHSUNDEEP
htmlcss
user689751
user689751

Reputation:

align div's to bottom with margin applied

how can we align all the list items to the bottom of the parent separated by a margin.

If I apply position: absolute; bottom: 0, all elements align to the bottom but margins are discarded.

 #bars0 {
width: 472px;
height: 258px;
position: relative;
 }
 #bars0 li {
border: solid red 1px;
width: 30px;
height: 50px;
margin-right: 95px;
position: absolute;
    bottom: 0   
}

  <div id="bars0">
   <ul><!-- update: added ul -->
  <li></li>
  <li></li>
  <li></li> 
  <li></li>
  </ul>
  </div>

Upvotes: 0

Views: 100

Answers (2)

James Johnson
James Johnson

Reputation: 46077

I think you're trying to do something like this:

<style type="text/css">
#container {
    position: relative;
    height:200px;
    border:1px solid red;
}
#bars{
    position:absolute;
    bottom: 5px;    
}
#bars ul li {
    float: left;
    min-width:100px;
}
</style>
<div id="container">
    <div id="bars">
        <ul>
            <li>Test</li>
            <li>Test 2</li>
        </ul>
    </div>
</div>

Here's a jsFiddle to demonstrate: http://jsfiddle.net/YYCZc/2/

Upvotes: 0

sbeliv01
sbeliv01

Reputation: 11840

Any reason why you can't surround the <li> with a <ul> tag and absolutely position the <ul>? That way you could control the margin of internal <li>??

The HTML:

<div id="bars0">
    <ul>
        <li></li>
        <li></li>
        <li></li> 
        <li></li>
    </ul>
</div>

The CSS:

#bars0 {
    width: 472px;
    height: 258px;
    position: relative;
}

#bars0 ul {
    position: absolute;
    bottom: 0;
}

#bars0 li {
    border: solid red 1px;
    width: 30px;
    height: 50px;
    margin-right: 95px;
    vertical-align: bottom;
    display: block;
    float: left;
}

#bars0 li:last-child {
    margin-right: 0;
}

Thusly: http://jsfiddle.net/RYBFF/1/

To address your recent request on the comments: Just remove the margin from the last item in the list using :last-child on the <li> as shown above.

Upvotes: 1

Related Questions